Javascript 解析混响+；React路由器DOM+；Redux:受保护的路由在刷新时重定向

我正在使用Parse Server作为我的应用程序的后端，它对应的JS SDK作为前端，使用React+React Router DOM+Redux，并且已经使用路由容器方法实现了“受保护路由”，在这里我获得身份验证状态，如果为false，则重定向到登录

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" />
      }
    />
  )
}

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>
    </>
  );
}

function-ProtectedRoute（{component:component，…routeProps}）{
const isLoggedIn=useSelector（state=>state.Auth.isLoggedIn）
返回(
伊斯洛格丁
}
/>
)
}

这正如预期的那样有效

Parse JS SDK有一个currentUser（）方法来获取当前登录的用户会话

在我的App.js中，我通过Parse的currentUser（）加载用户，并发送一个事件来更新身份验证状态（isLoggedIn:true）。工作正常，状态更新正确

App.js

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

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>
    </>
  );
}

函数应用程序（）{
const dispatch=usedpatch（）；
useffect（（）=>{
初始化（API.AppId，API.JavascriptKey）；
Parse.serverURL=API.serverURL；
//loadUser是一个调用Parse.currentUser（）并更新状态的操作。
分派（loadUser（））；
}, []);
返回(
页面标题
);
}

问题是，当我在受保护的路由（/app/dashboard）中刷新页面时，它会重定向到登录页面

我是新手，所以我不知道问题是否存在。我猜想我的app.js

useffect

会在ProtectedRoute.js

useSelector（state=>state.Auth.isLoggedIn）

之前调用

dispatch（loadUser（））

，但似乎ProtectedRoute已经挂载并询问app.js useffect之前的状态

---

如有任何建议，将不胜感激。

是的。React将第一次渲染，然后运行效果，然后第二次渲染（如果效果已更改状态）。您有两个选项：1）在效果仍在运行时实现“加载…”消息；2） 使用localStorage在整个刷新过程中保持您的状态（或部分状态）。感谢Davi，我实际上在我的状态中实现了与firstLoadFinished属性（在parse currentUser（）完成时设置为true）相结合的加载，因此我可以基于firstLoadFinished值进行重定向。再次感谢。