React私有路由组件渲染两次

Question

我是一名中文翻译助手，需要为您翻译与IT技术相关的内容。您需要将React/firebase应用程序中的私有路由设置正确，使用react-firebase-hooks/auth中的{useAuthState}进行身份验证。

应用程序:

let App = () => {
  const [user] = useAuthState(auth);
  return (
   <Navbar
      ...
      <a href="/user" />user</a>
      ...
   />
   <Router>
       <div className='main-content'>
       <Route path='/auth/signin' component={Login} />
       <ProtectedRoute path='/user' component={UserHome} 
        isAuth={user} />
   ..
  };

受保护的路由：

const ProtectedRoute = ({ component: Component, isAuth, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        isAuth ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{ pathname: "/user/signin", state: { from: props.location } }}
          />
        )
      }
    />
  );
};

export default ProtectedRoute;

React会将组件渲染两次，在第一次渲染时props为空，这会触发受保护的路由重定向。 但在第二次渲染时，所有的props都已经就绪，但此时已经太晚了，重定向已经发生了。

是否可以在渲染或重定向之前等待所有props加载完成？ 或者还有其他解决方法吗？

最好的祝福

- Johan

---

据我所知，组件在没有props的情况下渲染是因为JavaScript的异步行为，所以在Firebase返回数据之前，对象会被初始化为null值，一旦Firebase检索到信息，就会传递给组件。尝试使用除了null以外的默认值来处理这种情况，比如初始值设为false，并添加条件isAuth！= null && isAuth...或者尝试在设置isAuth的函数中使用async await。 - sheikh hamza

Answer 1

由于useAuthState可能需要一段时间才能获取用户信息，因此您应该使用它提供的loading属性等待其完成：

let App = () => {
  const [user, loading, error] = useAuthState(auth);
  if (loading) {
    return (
      <div>
        <p>Initialising User...</p>
      </div>
    );
  }
  if (error) {
    return (
      <div>
        <p>Error: {error}</p>
      </div>
    );
  }
  return (
    <Navbar
      ...
      <a href="/user" />user</a>
      ...
    />
    <Router>
       <div className='main-content'>
       <Route path='/auth/signin' component={Login} />
       <ProtectedRoute path='/user' component={UserHome} 
        isAuth={user} />
    ..
  };

您可以在此处阅读更多相关信息： 链接

- Tasos