Question

我正在编写一个React / firebase应用程序，我试图让一些私有路由起作用。我使用{useAuthState}中的react-firebase-hooks/auth来帮助我进行身份验证。

应用程序：

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为null，这会触发受保护的重定向路线。但是在第二次渲染时，道具就在那里了，但是到了后期，重定向发生了。

是否可以在渲染或重定向之前等待所有道具加载？还是有其他解决方法？

最诚挚的问候

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

您可以read more here

React私有路由组件渲染两次

1 个答案: