React Router v6中实现路由重定向与权限控制

// 错误的用法示例：
let routes;
if (isLoggedIn) {
  routes = (
    <React.Fragment>
      {/* ... 其他路由 ... */}
      // 这里直接调用 navigate 是错误的，因为它不在组件内部
      navigate('/') 
    </React.Fragment>
  );
} else {
  routes = (
    <React.Fragment>
      {/* ... 其他路由 ... */}
      // 同样，这里直接调用 navigate 也是错误的
      navigate('/login')
    </React.Fragment>
  );
}

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

/**
 * 私有路由组件，用于保护需要登录才能访问的页面。
 * 如果用户未登录，则重定向到登录页。
 *
 * @param {object} props
 * @param {boolean} props.isLoggedIn - 用户是否已登录。
 * @param {React.ReactNode} props.children - 私有路由的子组件（即受保护的页面）。
 * @returns {React.ReactNode}
 */
const PrivateRoute = ({ isLoggedIn, children }) => {
  if (!isLoggedIn) {
    // 如果用户未登录，使用 <Navigate> 组件重定向到登录页面。
    // `replace` 属性确保重定向后，浏览器历史记录中不会保留当前路径。
    return <Navigate to="/login" 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 PrivateRoute from './components/PrivateRoute'; // 导入 PrivateRoute 组件
import { AuthContext } from './context/AuthContext'; // 假设你有一个 AuthContext

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

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

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

              {/* 示例：如果用户已登录，访问 /login 则重定向到 / */}
              {isLoggedIn && <Route path="/login" element={<Navigate to="/" replace />} />}

              {/* 捕获所有未知路由，重定向到首页或404页面 */}
              <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
          </div>
        </div>
      </Router>
    </AuthContext.Provider>
  );
}

export default App;