react 路由守卫

React 路由守卫是一种在 React 应用中对路由进行保护和控制访问的机制。它可以在用户访问特定路由之前验证用户身份、权限或其他条件，并根据结果决定是否允许用户访问该路由。

在 React 中，常见的使用路由守卫的库有 react-router 和 react-router-dom。以下是使用 react-router-dom 的例子：

1. 首先，确保已经安装了 react-router-dom：

   npm install react-router-dom

2. 在你的应用中导入所需的模块：

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

3. 创建一个路由守卫组件，可以根据需要进行验证逻辑：

   import React from 'react';

   const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
     <Route
       {...rest}
       render={(props) =>
         isAuthenticated ? (
           <Component {...props} />
         ) : (
           <Redirect to="/login" />
         )
       }
     />
   );

   export default PrivateRoute;

4. 在你的应用中定义路由，并使用路由守卫组件保护需要验证的路由：

   import PrivateRoute from './PrivateRoute';

   const App = () => {
     const isAuthenticated = // 根据你的实际情况确定用户是否已经验证

     return (
       <Router>
         <Switch>
           <Route path="/login" component={Login} />
           <PrivateRoute
             path="/dashboard"
             component={Dashboard}
             isAuthenticated={isAuthenticated}
           />
         </Switch>
       </Router>
     );
   };

   export default App;

在上面的例子中，PrivateRoute 组件接收一个 `component` 属性，如果用户已经验证（`isAuthenticated` 为真），则渲染目标组件；否则，重定向到登录页面。

这只是一个简单的示例，你可以根据你的需求扩展和定制路由守卫的逻辑。希望对你有所帮助！