Question

我试图在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组件并刷新浏览器时，它们都会同时包含我编辑过的页面和重定向页面，就像我同时注销并登录一样。在Hindsight中，如果/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>

Answer 1

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

刷新时的专用路由包括重定向路由

1 个答案: