Question

我正在尝试在React中设置PrivateRouter，并且发现以下代码由于上下文变量而重定向到登录页面，尽管currentUser对象存在，但它为null。

有什么方法可以等待这些上下文变量，或者有其他方法可以解决此路由问题？

import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import { AuthContext} from "./Auth";

const PrivateRoute = ({ component: RouteComponent, ...rest }) => {

  const {currentUser} = useContext(AuthContext);

  return (
    <Route
      {...rest}
      render={routeProps =>
        !!currentUser ? (
          <RouteComponent {...routeProps} />
        ) : (
          <Redirect to={"/login"} />
        )
      }
    />
  );
};
export default PrivateRoute

Answer 1

我在这里回答：https://stackoverflow.com/a/63478324/9404135 另外，您可以查看该问题中的其他答案。

我今天遇到这个问题，我喜欢Shubham的所作所为。但是，我解决该问题的方法只是从上一个组件中获取userinfo并将其传递给此profile组件。

但是，请确保渲染这样的Profile组件，以确保userinfo存在：

function ParentComponent(){
 // do sth to get the userinfo here
return(
  <ParentComponent>
     {userinfo? <Profile userinfo={userinfo} /> : null}       
 <ParentComponent/>
)
}

在React中等待useContext对象

1 个答案: