如何使用react-router-dom创建受保护的路由，并将响应存储在localStorage中，以便用户下次打开时可以再次查看他们的详细信息。登录后，他们应该重定向到仪表板页面。
所有功能都在ContextApi中添加。
Codesandbox链接：Code
我尝试过，但未能实现。
路由页面
从“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 ( ); }