时间戳

首页 > 解决方案 > 刷新时的私有路由包括重定向路由

reactjs - 刷新时的私有路由包括重定向路由

问题描述

我正在尝试在 ReactJS 中做一个简单的 PrivateRoute，最初当我编写 PrivateRoute 函数时，它不会重定向到它设置到的组件。

这是原始PrivateRoute组件

 import React from 'react';
 import { Route, Redirect } from 'react-router-dom';
 const PrivateRoute = ({component: Component, authenticated , ...rest}) => {
    return (
    <Route {...rest} render={(props) => (
    authenticated === true
      ? <Component {...props} />
      : <Redirect to='/login' />
  )}/>
  )
 }



 export default PrivateRoute;

然后我编辑了PrivateRoute组件以摆脱{...rest}道具，它工作正常，它重定向到受保护的页面。但是，每当我编辑PrivateRoute组件和浏览器刷新时，它们都包括我编辑的页面和重定向页面，就好像我同时注销和登录一样。事后看来，/login如果不正确，我重定向的页面authenticated将位于首页，受保护的组件将位于同一页面的正下方。

这是在任何刷新新页面之前工作的组件

 import React from 'react';
 import { Route, Redirect } from 'react-router-dom';
 const PrivateRoute = ({component: Component, authenticated ,}) => 
  {
    return (
    <Route render={(props) => (
    authenticated === true
      ? <Component {...props} />
      : <Redirect to='/login' />
  )}/>
  )
 }



 export default PrivateRoute;

任何帮助将不胜感激，这是我的 App.js

     <BrowserRouter>
      <Route path="/" component = {LandingPage} exact/>
      <Route path="/login" component={Login} exact/>
      <Route path="/register" component={Register} exact/>
      <PrivateRoute path="/dash" component={Dash}  authenticated={authenticated}/>
    </BrowserRouter>

标签： reactjsroutesreact-router-dom

解决方案

我发现了为什么我在App.js文件中遇到的问题我将身份验证状态设置为 false 并且没有设置解决我的问题的超时功能

推荐阅读