Reactjs 路由器中的PrivateRoute、HOC在经过身份验证后仍然重定向到登录？

我试图利用从redux store到HOC的状态来允许或拒绝我*应用程序中的用户，例如私人路由

我正在跟踪来自React路由器的消息，它只工作了一半。我的问题是，当我转到URL或刷新新验证的路由时，如果未经验证，我会被重定向。点击导航栏，可以看到下面的我的gif

*我也在使用Next.JS，但无法让路由系统使用语义UI React。这就是我使用React路由器的原因

这是我的全部内容：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { logInUser, logOutUser } from '../store/index'
import { bindActionCreators } from 'redux'

import {
 BrowserRouter as Router,
 Switch,
 Route,
 Redirect,

 withRouter
} from 'react-router-dom'

import LinkNavWithLayout from './LinkNavWithLayout'
import Index from './home'
import Profile from './profile'
import Dashboard from './dashboard'
import Login from './login'
import Register from './register'

class App extends Component {
 static getInitialProps({ store, isLoggedIn, logInUser, logOutUser }) {
  return { store, isLoggedIn, logInUser, logOutUser }
 }

 constructor(props) {
  super(props)

  this.state = {
   isLoggedIn: false
  }

 }

 render(){
  const { isLoggedIn } = this.props;

 console.log("pages/index this.props ", this.props);
  let navBars = [
   { name: "Home", path: "/"},
   { name: "Profile", path: "/profile"},
   { name: "Dashboard", path: "/dashboard"},
   { name: "Log in", path: "/login"},
   { name: "Register", path: "/register"}
  ];

My HOC PrivateRoute组件：

  function PrivateRoute({ children, ...rest }) {
   return (
    <Route
     {...rest}
     render={({ location }) =>
      isLoggedIn ? (
       children
      ) : (
        <Redirect
         to={{
          pathname: "/login",
          state: { from: location }
         }}
        />
       )
     }
    />
   );
  }

  return (
    <>
    <Switch>
     <Route
      path='/'
      exact
      render={(props) => <LinkNavWithLayout {...props} data={navBars}><Index /></LinkNavWithLayout>} />

---

提前谢谢！我已经被困了一段时间，所以任何帮助都将不胜感激

您这里的问题是您的redux状态或与此相关的任何状态。重新加载时不会持久，因为它是单页应用程序。 没有本地存储就不行

当我们从本地存储中获取信息以进入状态时。这叫做水合作用。 所以如果你用谷歌搜索坚持/补水redux。你应该找到你需要的工具和文章

我发现了一个看起来不错的。

---

您使用什么进行身份验证？您需要跨页面加载存储您的身份验证状态，并在页面加载时将其加载到您的redux存储中。我想我应该重新问这个问题，因为我正在使用，我想这已经解决了。我检查了devtools>application>storage>localStorage，并在下面的键下看到：

persist:primary

和Value:`{“isLoggedIn”：“true”，“u persist”：“{“version\”：-1”，“rehydrated\”：true}`和底部的这个

{isLoggedIn:“true”，“u persist:“{”version:-1，“rehydrated”：true}”isLoggedIn:“true”：“true”：“rehydrated persist:”：-1，“rehydrated”“：true}”

如果你能在下一个小时左右将其投入使用，我会检查并为你将其切换到工作状态。一些提示：1.你在应用程序中设置本地状态的构造函数毫无意义。2.我会连接（）完成自己状态的私有路由组件很抱歉延迟！感谢您的洞察力和帮助！我有一个三岁的孩子要睡觉，然后我通过了put！问题：我只需要添加

index.js

文件吗？带路由的文件？还是应该添加整个应用程序？@AntonioPavicevac Ortiz尽可能添加到让它发挥作用哇，谢谢你向我介绍codesandbox.io，太棒了！我真的可以将我的github回购添加到一个沙盒中！这是我在sandbox上设置的

     <PrivateRoute
      path='/profile'
      isLoggedIn={isLoggedIn}
      >
      <LinkNavWithLayout data={navBars}><Profile /></LinkNavWithLayout>
     </PrivateRoute>

     <PrivateRoute
      path='/dashboard'
      isLoggedIn={isLoggedIn}
     >
      <LinkNavWithLayout data={navBars}><Dashboard /></LinkNavWithLayout>
     </PrivateRoute>

     <Route
      path='/login'
      render={(props) => <Login {...props}/>}
     />

     <Route
      path='/register'
      render={() => <Register />}
     />

     <Route component={({ location }) => <p>Sorry but the page <h1>{location.pathname.substring(1)} </h1> Page, Could Not be found</p>} />
    </Switch>
    </>
  )
 }
}

function mapStateToProps(state) {
 const { isLoggedIn } = state
 return { isLoggedIn }
}

const mapDispatchToProps = dispatch =>
 bindActionCreators({ logInUser, logOutUser }, dispatch)

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App))