如何使用 react-router 确保它在 Reactjs 中工作答案

【问题标题】：How to use react-router to make sure it works in Reactjs如何使用 react-router 确保它在 Reactjs 中工作
【发布时间】：2020-04-28 05:23:31
【问题描述】：

这是我的沙盒代码https://codesandbox.io/s/wispy-glitter-spgch?file=/src 我想要做的是点击登录按钮试图呈现仪表板页面，网址确实转到路径'/dashboard'但不呈现任何东西我找不到错误我已经在一个组件中完成了路由，并在 Context API 中传递了该组件

在页面刷新时，即在“/dashboard”仪表板部分中，它再次进入登录部分如何使用状态维护它

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

在受保护的路由中使用exact 参数，如下所示：

<ProtectedRoute
        path="/dashboard"
        exact
        auth={authState.isAuthenticated}
        component={Dashboard}
/>

【讨论】：

@Akhi21 我分叉和它的工作codesandbox.io/s/admiring-einstein-83unj
hi @alishi973 页面刷新还有一个问题再次进入登录页面
@Akhi21 它没有反应问题，当您刷新页面时，所有状态重置为初始值并且您的 auth 变量重置为 false，并且您重定向到登录页面您必须坚持使用 auth令牌或类似的东西。
在我的真实项目中，我确实在本地存储中维护了身份验证令牌，但仍然在页面刷新它登陆登录部分
@Akhi21 token 必须在用户 Logged In 时保持不变。并在第一次渲染时从持久存储（如LocalStorage）中检索此项目，并且当用户在 ls 中有令牌时，其证明用户之前已登录（即使令牌无效）所以向服务器发出请求，之后第一个请求，服务器检查用户发送的令牌，如果令牌无效（服务器返回401 unauthorized）用户重定向到Login，否则响应由元素服务。