学习React (5) 路由管理

React Router 是 React 应用中处理路由的标准库。它允许你定义不同路径对应的组件，处理带参数的路由，实现多级嵌套路由以及保护特定路由。以下是对这些功能的详细介绍及示例代码。

1. 路由配置

路由配置是设置不同 URL 路径对应的组件展示。

使用步骤：

1. 安装 React Router：

   npm install react-router-dom
   

2. 基本路由配置：

   // App.js
   import React from 'react';
   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
   import Home from './Home';
   import About from './About';
   import Contact from './Contact';
   
   function App() {
     return (
       <Router>
         <Switch>
           <Route path="/" exact component={Home} />
           <Route path="/about" component={About} />
           <Route path="/contact" component={Contact} />
         </Switch>
       </Router>
     );
   }
   
   export default App;
   

2. 动态路由

动态路由可以处理带参数的路径，例如用户详情页等。

使用步骤：

1. 定义包含参数的路由：

   // App.js
   import React from 'react';
   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
   import UserProfile from './UserProfile';
   
   function App() {
     return (
       <Router>
         <Switch>
           <Route path="/user/:id" component={UserProfile} />
         </Switch>
       </Router>
     );
   }
   
   export default App;
   

2. 在组件中获取参数：

   // UserProfile.js
   import React from 'react';
   import { useParams } from 'react-router-dom';
   
   function UserProfile() {
     let { id } = useParams();
     return <div>User ID: {id}</div>;
   }
   
   export default UserProfile;
   

3. 嵌套路由

嵌套路由允许实现多级路由嵌套，例如一个博客应用中的文章列表和文章详情。

使用步骤：

1. 定义嵌套路由：

   // App.js
   import React from 'react';
   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
   import Dashboard from './Dashboard';
   import PostList from './PostList';
   import PostDetail from './PostDetail';
   
   function App() {
     return (
       <Router>
         <Switch>
           <Route path="/dashboard" component={Dashboard} />
         </Switch>
       </Router>
     );
   }
   
   export default App;
   

2. 在子组件中定义嵌套路由：

   // Dashboard.js
   import React from 'react';
   import { Route, Switch, Link, useRouteMatch } from 'react-router-dom';
   import PostList from './PostList';
   import PostDetail from './PostDetail';
   
   function Dashboard() {
     let { path, url } = useRouteMatch();
   
     return (
       <div>
         <h1>Dashboard</h1>
         <ul>
           <li><Link to={`${url}/posts`}>Posts</Link></li>
         </ul>
   
         <Switch>
           <Route exact path={path}>
             <h3>Please select an option.</h3>
           </Route>
           <Route exact path={`${path}/posts`} component={PostList} />
           <Route path={`${path}/posts/:postId`} component={PostDetail} />
         </Switch>
       </div>
     );
   }
   
   export default Dashboard;
   

4. 路由守卫

路由守卫可以保护特定路由，确保用户满足一定条件（如已登录）才能访问。

使用步骤：

1. 创建 PrivateRoute 组件：

   // PrivateRoute.js
   import React from 'react';
   import { Route, Redirect } from 'react-router-dom';
   
   function PrivateRoute({ component: Component, ...rest }) {
     const isAuthenticated = /* logic to check if user is authenticated */;
   
     return (
       <Route
         {...rest}
         render={props =>
           isAuthenticated ? (
             <Component {...props} />
           ) : (
             <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
           )
         }
       />
     );
   }
   
   export default PrivateRoute;
   

2. 使用 PrivateRoute 保护路由：

   // App.js
   import React from 'react';
   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
   import Home from './Home';
   import Login from './Login';
   import Dashboard from './Dashboard';
   import PrivateRoute from './PrivateRoute';
   
   function App() {
     return (
       <Router>
         <Switch>
           <Route path="/" exact component={Home} />
           <Route path="/login" component={Login} />
           <PrivateRoute path="/dashboard" component={Dashboard} />
         </Switch>
       </Router>
     );
   }
   
   export default App;
   

通过上述步骤，你可以配置基本路由、处理动态路由、实现嵌套路由以及保护特定路由，确保你的 React 应用具备完善的路由管理功能。