React Router v6 权限路由与重定向实现指南

// 错误示例
let routes;
if (isLoggedIn) {
  routes = (
    <React.Fragment>
      <Route exact path="/" element={<Searchbar changeHeader={setHeader} />} />
      {/* ...其他路由 */}
      navigate('/') // 错误：navigate不能在这里直接调用
    </React.Fragment>
  );
} else {
  routes = (
    <React.Fragment>
      <Route exact path="/" element={<Searchbar changeHeader={setHeader} />} />
      {/* ...其他路由 */}
      <Route path="/Login" element={<LoginForm />} />
      navigate('/login') // 错误：navigate不能在这里直接调用
    </React.Fragment>
  );
}

import React from 'react';
import { Navigate } from 'react-router-dom';

/**
 * PrivateRoute 组件用于保护需要认证才能访问的路由。
 * 如果用户未登录，则重定向到登录页。
 *
 * @param {object} props
 * @param {boolean} props.isLoggedIn - 用户是否已登录。
 * @param {React.ReactNode} props.children - 被保护的子组件。
 * @param {string} [props.redirectTo='/login'] - 未登录时重定向的目标路径。
 */
const PrivateRoute = ({ isLoggedIn, children, redirectTo = '/login' }) => {
  if (!isLoggedIn) {
    // 如果用户未登录，使用 <Navigate> 组件进行声明式重定向
    // `replace` 属性会替换历史栈中的当前条目，防止用户返回到受保护页面
    return <Navigate to={redirectTo} replace />;
  }
  // 如果用户已登录，渲染被保护的子组件
  return children;
};

export default PrivateRoute;

import React, { useState, useEffect, useContext } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Searchbar from './components/Searchbar';
import Result from './components/Result';
import Chatbox from './components/Chatbox';
import Assist from './components/Assist';
import LoginForm from './components/LoginForm';
import AuthContext from './context/AuthContext'; // 假设你有一个AuthContext
import PrivateRoute from './PrivateRoute'; // 导入上面创建的PrivateRoute

function App() {
  const [header, setHeader] = useState('');
  const authCtx = useContext(AuthContext); // 获取认证上下文
  const isLoggedIn = authCtx.isLoggedIn; // 从上下文中获取登录状态

  // 模拟登录/登出函数
  const login = () => { /* ... */ authCtx.login(); };
  const logout = () => { /* ... */ authCtx.logout(); };

  return (
    <AuthContext.Provider value={{ isLoggedIn: isLoggedIn, login: login, logout: logout }}>
      <Router>
        <div className="App">
          <Navbar header={header} headersetter={setHeader} />
          <div className="aSearch">
            <Routes>
              {/* 公开路由 */}
              <Route exact path="/" element={<Searchbar changeHeader={setHeader} />} />
              <Route path="/Result" element={<Result changeHeader={setHeader} topic={header} />} />
              <Route path="/Login" element={<LoginForm />} />

              {/* 受保护路由 - 使用 PrivateRoute 包装 */}
              <Route
                path="/Chatbox/:sID"
                element={
                  <PrivateRoute isLoggedIn={isLoggedIn}>
                    <Chatbox />
                  </PrivateRoute>
                }
              />
              <Route
                path="/Assist"
                element={
                  <PrivateRoute isLoggedIn={isLoggedIn}>
                    <Assist changeHeader={setHeader} />
                  </PrivateRoute>
                }
              />

              {/* 默认重定向（例如，如果用户已登录，访问 /login 时重定向到 /） */}
              <Route
                path="/login"
                element={isLoggedIn ? <Navigate to="/" replace /> : <LoginForm />}
              />
              {/* 处理所有未匹配的路由，例如重定向到首页或404页 */}
              <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
          </div>
        </div>
      </Router>
    </AuthContext.Provider>
  );
}

export default App;