React Router v6 中实现条件路由与重定向的指南

let routes;
if (isLoggedIn) {
  routes = (
    <React.Fragment>
      {/* ... 路由定义 ... */}
      navigate('/') // 错误：在非组件上下文调用
    </React.Fragment>
  );
} else {
  routes = (
    <React.Fragment>
      {/* ... 路由定义 ... */}
      navigate('/login') // 错误：在非组件上下文调用
    </React.Fragment>
  );
}

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

const PrivateRoute = ({ isLoggedIn, children }) => {
  if (!isLoggedIn) {
    // 如果用户未登录，则重定向到登录页面
    // `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 AuthContext from './store/auth-context'; // 假设你有一个认证上下文
import PrivateRoute from './PrivateRoute'; // 导入 PrivateRoute 组件

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

  // 假设 isLoggedIn 状态从 AuthContext 中获取
  const isLoggedIn = authCtx.isLoggedIn; 

  // 认证相关的函数，如 login, logout
  const login = () => { /* ... */ };
  const 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 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;