面试题：React中如何实现简单的路由守卫？

Question

请阐述在React项目里，借助React Router实现一个简单路由守卫的思路及关键代码步骤，假设需求是在进入某些特定路由前检查用户是否已登录。

Answer 1

思路

1. 利用React Router提供的路由组件和生命周期方法。
2. 创建一个高阶组件（HOC）或者自定义组件来作为路由守卫。
3. 在该组件中检查用户登录状态，根据状态决定是否允许进入特定路由。

关键代码步骤

1. 安装React Router：

   npm install react-router-dom
   

2. 创建路由守卫组件：

   import React from'react';
   import { Navigate, Outlet } from'react-router-dom';
   import { useAuth } from './AuthContext'; // 假设从上下文获取登录状态
   
   const RequireAuth = () => {
     const { isLoggedIn } = useAuth();
     return isLoggedIn? <Outlet /> : <Navigate to="/login" />;
   };
   
   export default RequireAuth;
   

3. 在路由中使用路由守卫：

   import React from'react';
   import { BrowserRouter as Router, Routes, Route } from'react-router-dom';
   import RequireAuth from './RequireAuth';
   import Home from './Home';
   import Login from './Login';
   
   const App = () => {
     return (
       <Router>
         <Routes>
           <Route path="/login" element={<Login />} />
           <Route path="/" element={<RequireAuth />}>
             <Route path="/home" element={<Home />} />
           </Route>
         </Routes>
       </Router>
     );
   };
   
   export default App;
   

上述代码中，RequireAuth组件作为路由守卫，通过useAuth钩子获取登录状态。如果用户已登录，Outlet组件会渲染子路由；否则，Navigate组件会将用户重定向到登录页面。在路由配置中，将需要保护的路由放在RequireAuth组件内部。