如何使用react-router-dom建立受保護的路由，並將回應儲存在localStorage中，以便使用者下次開啟時可以再次查看他們的詳細資料。登入後，他們應該重定向到儀表板頁面。
所有功能都加入在ContextApi中。Codesandbox連結：代碼
我嘗試過，但無法實作
路由頁面
從「react」匯入 React, { useContext }; 從“./context”導入{globalC}； 從「react-router-dom」匯入{路由、交換器、BrowserRouter}； 從“./About”導入關於； 從“./Dashboard”導入儀表板； 從“./Login”匯入登入名； 從“./PageNotFound”導入PageNotFound； 函數路線（）{ const { authLogin } = useContext(globalC); console.log("authLogin", authLogin); 返回 （
<瀏覽器路由器>
<開關>
{驗證登入？ （ <> <路線路徑=“/儀表板”組件= {儀表板}精確/> />
<路線確切路徑=“ 關於”元件="{關於}"> ) : (
<路由路徑=“ ”元件="{登入}精確/">
> )}
<路由元件={pagenotfound}> ）； } 導出預設路由；
上下文頁面
從「react」匯入 React, { Component, createContext }; 從“axios”導入 axios； 匯出 const globalC = createContext(); 導出類別 Gprov 擴充組件 { 狀態={ 授權登入：空， authLogin錯誤：空 }; 組件DidMount() { var localData = JSON.parse(localStorage.getItem("loginDetail")); 如果（本地資料）{ this.setState({ authLogin：本地數據 }); } } 登入資料 = async() => { 讓有效負載= { 令牌：“ctz43XoULrgv_0p1pvq7tA”， 數據： { 名稱：“名字第一”， 電子郵件：“互聯網電子郵件”， 電話：“電話主頁”， _重複：300 } }; 等待 axios .post(`https://app.fakejson.com/q`，有效負載) .then((res) => { if (res.status === 200) { this.setState({ authLogin：res.data }); localStorage.setItem("loginDetail", JSON.stringify(res.data)); } }) .catch((錯誤) => this.setState({ 授權登入錯誤：錯誤 }) ）； }; 使成為（） { // console.log(localStorage.getItem("loginDetail")); 返回 （
{this.props.children}
）； } }
>
對於v6：
import { Routes, Route, Navigate } from "react-router-dom"; function App() { return ( ); } function RequireAuth({ children, redirectTo }) { let isAuthenticated = getAuth(); return isAuthenticated ? children : 文件連結：https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f
問題
Switch除了Route和Redirect元件之外，不會處理其他任何渲染。如果您想要像這樣“嵌套”，那麼您需要將每個元件包裝在通用路由中，但這是完全不必要的。您的登入元件尚未處理重定向回原來存取的「首頁」或私人路由。
解決方案
react-router-domv6在版本6中，自訂路由元件已經不再受歡迎，首選方法是使用auth佈局元件。
import { Navigate, Outlet } from 'react-router-dom'; const PrivateRoutes = () => { const location = useLocation(); const { authLogin } = useContext(globalC); if (authLogin === undefined) { return null; // 或者加载指示器/旋转器等 } return authLogin ?...
或
const routes = [ { path: "/", element:...
export default function Login() { const location = useLocation(); const navigate = useNavigate(); const { authLogin, loginData } = useContext(globalC); useEffect(() => { if (authLogin) { const { from } = location.state || { from: { pathname: "/" } }; navigate(from, { replace: true }); } }, [authLogin, location, navigate]); return ( ); }react-router-domv5建立一個消費您的auth上下文的
PrivateRoute元件。const PrivateRoute = (props) => { const location = useLocation(); const { authLogin } = useContext(globalC); if (authLogin === undefined) { return null; // 或者加载指示器/旋转器等 } return authLogin ? (更新您的
Login元件以處理重定向回原來存取的路由。export default function Login() { const location = useLocation(); const history = useHistory(); const { authLogin, loginData } = useContext(globalC); useEffect(() => { if (authLogin) { const { from } = location.state || { from: { pathname: "/" } }; history.replace(from); } }, [authLogin, history, location]); return ( ); }將所有路由渲染為「扁平清單」
function Routes() { return ( ); }