首先準備好以下頁面

登錄頁：用戶可以在此頁面登錄。
受保護頁：只有登錄的用戶可以訪問，否則會重定向到登錄頁。
公共頁面：不需要鑒權，任何人都可以訪問。

1. 安裝依賴
首先，我們需要安裝 react-router-dom：
npm install react-router-dom
2. 設置鑒權邏輯
使用 React Context 來管理用戶的登錄狀態（模擬鑒權）。創建一個簡單的 AuthContext 來保存和提供用戶的登錄信息。

//AuthContext.jsimport React, { createContext, useContext, useState } from 'react';// 創建 AuthContext
const AuthContext = createContext();// 提供 AuthContext 的自定義 Hook
export const useAuth = () => {return useContext(AuthContext);
};// 創建 AuthProvider 來管理用戶認證狀態
export const AuthProvider = ({ children }) => {const [isAuthenticated, setIsAuthenticated] = useState(false);const login = () => setIsAuthenticated(true);const logout = () => setIsAuthenticated(false);return (<AuthContext.Provider value={{ isAuthenticated, login, logout }}>{children}</AuthContext.Provider>);
};

?3. 配置路由守衛
在 React Router v6 中，路由守衛通過 Navigate 組件進行重定向。我們需要創建一個 PrivateRoute 組件來作為守衛，用于保護受限制的頁面。

//PrivateRoute.jsimport React from 'react';
import { Navigate } from 'react-router-dom';
import { useAuth } from './AuthContext';// PrivateRoute 組件用于保護需要認證的路由
const PrivateRoute = ({ element }) => {const { isAuthenticated } = useAuth();if (!isAuthenticated) {// 如果用戶未認證，重定向到登錄頁面return <Navigate to="/login" />;}return element;
};export default PrivateRoute;

?4. 創建頁面組件
需要三個頁面：登錄頁、受保護頁和公共頁面。

//LoginPage.jsimport React, { useState } from 'react';
import { useAuth } from './AuthContext';
import { useNavigate } from 'react-router-dom';const LoginPage = () => {const [username, setUsername] = useState('');const { login } = useAuth();const navigate = useNavigate();const handleLogin = () => {// 這里可以做更復雜的驗證if (username) {login(); // 登錄navigate('/protected'); // 登錄后跳轉到受保護頁}};return (<div><h2>Login Page</h2><inputtype="text"placeholder="Enter username"value={username}onChange={(e) => setUsername(e.target.value)}/><button onClick={handleLogin}>Login</button></div>);
};export default LoginPage;

//ProtectedPage.jsimport React from 'react';
import { useAuth } from './AuthContext';const ProtectedPage = () => {const { logout } = useAuth();return (<div><h2>Protected Page</h2><p>This page is only accessible after login.</p><button onClick={logout}>Logout</button></div>);
};export default ProtectedPage;

//PublicPage.jsimport React from 'react';const PublicPage = () => {return (<div><h2>Public Page</h2><p>This page is accessible to everyone.</p></div>);
};export default PublicPage;

5. 配置路由
配置 App.js，并使用 BrowserRouter 和 Routes 來定義路由。
?

//App.jsimport React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { AuthProvider } from './AuthContext';
import LoginPage from './LoginPage';
import ProtectedPage from './ProtectedPage';
import PublicPage from './PublicPage';
import PrivateRoute from './PrivateRoute';const App = () => {return (<AuthProvider><Router><Routes><Route path="/" element={<PublicPage />} /><Route path="/login" element={<LoginPage />} />{/* 使用 PrivateRoute 保護受保護頁 */}<Routepath="/protected"element={<PrivateRoute element={<ProtectedPage />} />}/></Routes></Router></AuthProvider>);
};export default App;

6. 代碼解釋
AuthContext.js：提供一個簡單的上下文 (AuthContext)，用于管理用戶的認證狀態，包括登錄 (login) 和登出 (logout) 操作。
PrivateRoute.js：通過 PrivateRoute 組件來保護受保護的頁面。如果用戶未登錄，自動重定向到登錄頁面。
頁面組件：登錄頁、受保護頁和公共頁面通過普通的 React 組件實現。登錄頁允許用戶輸入用戶名并登錄，受保護頁需要用戶登錄才能訪問，公共頁面可以供所有用戶訪問。
App.js：在 App.js 中使用 React Router 的 Routes 來配置路由，并根據需要使用 PrivateRoute 來保護需要鑒權的頁面。

總結
使用 React Router v6 配置路由守衛。
使用?React Context 來管理認證狀態，并通過 Navigate 組件來控制頁面訪問權限。
PrivateRoute 是路由守衛的核心，它根據用戶的認證狀態來決定是否允許訪問某些受保護的頁面。
這種方式適用于構建具有基本鑒權邏輯的 React 應用，適合大部分的需求。
?