react_tutorial/react_router_advanced

React Router Advanced 是 React 中用于管理复杂路由的高级功能集合。它提供了诸如嵌套路由、动态路由匹配、路由守卫等功能，使得构建大型单页应用变得更加容易。

嵌套路由 (Nested Routes)

嵌套路由允许你在子组件中定义路由。以下是一个嵌套路由的示例：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => (
  <Router>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About}>
        <Route path="/about/team" component={Team} />
        <Route path="/about/culture" component={Culture} />
      </Route>
    </Switch>
  </Router>
);

动态路由匹配 (Dynamic Route Matching)

动态路由匹配允许你根据 URL 中的参数来渲染不同的组件。以下是一个动态路由匹配的示例：

<Route path="/user/:id" component={User} />

在这个例子中，:id 是一个动态参数，你可以通过 this.props.match.params.id 访问它。

路由守卫 (Route Guards)

路由守卫允许你控制对特定路由的访问。以下是一个简单的路由守卫示例：

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    localStorage.getItem('token') ? (
      <Component {...props} />
    ) : (
      <Redirect to={{ pathname: '/login' }} />
    )
  )} />
);

export default PrivateRoute;

在上述代码中，我们使用 localStorage 来存储用户身份验证令牌。如果用户没有令牌，则将他们重定向到登录页面。

相关链接

更多关于 React Router 的信息，可以访问我们的 React Router 教程。

React Router