React-Router 6 路由教程 - 深入解析 React 路由核心

2024-02-06 10:53:34

React-Router 6：打造单页面应用程序的强大路由库

在当今快速发展的网络世界中，单页面应用程序（SPA）已成为构建交互式和响应式用户体验的首选。React-Router 6 是一个功能强大的路由库，旨在简化 SPA 的开发过程。它提供了定义路由规则、处理路由转换以及增强用户交互所需的所有工具。

路由核心概念

在探索 React-Router 6 之前，了解以下核心概念至关重要：

路由 (Route) ：SPA 中的不同视图或页面。
路由规则 (Route Rule) ：指定如何将 URL 映射到路由的规则。
路由转换 (Route Transition) ：用户在路由之间切换时发生的动态过程。

React-Router 6 使用技巧

1. 路由配置

路由配置是 React-Router 6 的核心。使用 <BrowserRouter> 组件定义路由规则，然后使用 <Route> 组件指定各个路由：

import { BrowserRouter, Route } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Route path="/" component={Home} />
      <Route path="/articles/:id" component={Article} />
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
};

2. 嵌套路由

嵌套路由允许在路由中嵌入其他路由，用于创建复杂的 UI 布局：

import { BrowserRouter, Route, Outlet } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Route path="/">
        <Sidebar />
        <Outlet />
      </Route>
      <Route path="/articles/:id" component={Article} />
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
};

3. 动态路由

动态路由利用 URL 参数动态加载不同组件：

import { BrowserRouter, Route } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Route path="/articles/:id" component={Article} />
    </BrowserRouter>
  );
};

4. 参数传递

要将参数传递给动态组件，请使用 <Route> 组件的 render 属性：

import { BrowserRouter, Route } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Route path="/articles/:id" render={(props) => <Article {...props} />} />
    </BrowserRouter>
  );
};

5. 路由守卫

路由守卫通过执行检查来保护路由，限制对特定路由的访问：

import { BrowserRouter, Route } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Route path="/private" guard={() => /* 检查逻辑 */} component={PrivateComponent} />
    </BrowserRouter>
  );
};

6. 路由重定向

路由重定向会自动将用户重定向到不同的路由，通常用于错误处理：

import { BrowserRouter, Route, Redirect } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Route path="/old-path" render={() => <Redirect to="/new-path" />} />
    </BrowserRouter>
  );
};

7. 路由过渡

路由过渡提供动画和效果，增强用户体验：

import { BrowserRouter, Route, Switch, TransitionGroup } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/articles/:id" component={Article} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
};