解析Rever + React Router DOM + Redux：受保护的路由在刷新时重定向

问题描述

我将Parse Server用于我的应用程序的后端，并将其对应的JS SDK用于前端，以及React + React Router DOM + Redux，并且已经使用路由容器方法实现了“受保护的路由”，在此我获得了auth状态，如果错误则重定向到登录名。

ProtectedRoute.js

function ProtectedRoute({ component: Component,...routeProps }) {
  const isLoggedIn = useSelector(state => state.Auth.isLoggedIn)
  
  return (
    <Route
      {...routeProps}
      render={ props => 
        isLoggedIn ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  )
}

这按预期工作。

Parse JS SDK本身具有currentUser（）方法来获取当前登录的用户会话。

在App.js中，我正在通过Parse的currentUser（）加载用户，并调度一个事件以更新auth状态（isLoggedIn：true）。可以，可以正确更新状态。

App.js

function App() {
  const dispatch = usedispatch();

  useEffect(() => {
    Parse.initialize(API.AppId,API.JavascriptKey);
    Parse.serverURL = API.ServerUrl;

    // loadUser is an action where I call Parse.currentUser() and update the state.
    dispatch(loadUser());
  },[]);

  return (
    <>
      <HelmetProvider>
        <Router>
          <Helmet>
            <title>Page Title</title>
          </Helmet>
          <header>
            <Navbar />
          </header>
          <main>        
            <div id="main-content">
              <Switch>
                <Route path="/about" component={ AboutPage } />
                <Route path="/register" component={ RegisterPage } />
                <Route path="/login" component={ LoginPage } />
                
                <ProtectedRoute path="/app/dashboard" component={ DashboardComponent } />

                <Route path="/" component={ HomePage } />
              </Switch>
            </div>
          </main>
        </Router>
      </HelmetProvider>
    </>
  );
}

问题是，当我处于受保护的路线（/ app /仪表板）中并刷新页面时，它会重定向到登录页面。

我是新来反应钩子的人，所以我不知道问题是否在那里。我猜想我的app.js useEffect会在ProtectedRoute.js dispatch(loadUser())之前调用useSelector(state => state.Auth.isLoggedIn)，但是似乎ProtectedRoute已挂载并询问App.js useEffect之前的状态。

任何建议将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）