Javascript 组件没有'；重新路由后无法渲染

我有一个问题，当我输入一封有效的电子邮件并将logged的状态设置为true时，组件会重定向，但不会呈现。我的应用程序包装在BrowserRouter中。地址栏显示正确的路径，但不显示任何内容

function App() {
  const [savedEmail, setSavedEmail] = useState(localStorage.getItem("email"));
  const [loggedIn, setLoggedIn] = useState(localStorage.getItem("logged"));
  return (
    <>
      <PropContext.Provider value={{ loggedIn, setLoggedIn, setSavedEmail }}>
        <Header />
        <Switch>
          <Route
            exact
            path="/"
            render={() => {
              return loggedIn ? (
                <Redirect to="/users" />
              ) : (
                <Redirect to="/login" />
              );
            }}
          ></Route>
          {loggedIn ? (
            <Redirect to="/users" />
          ) : (
            <Route exact path="/login" component={Login} />
          )}

          {loggedIn ? (
            <Route exact path="/users" component={Users} />
          ) : (
            <Redirect to="/login" />
          )}
        </Switch>
      </PropContext.Provider>
    </>
  );
}

函数应用程序（）{
const[savedEmail，setSavedEmail]=useState（localStorage.getItem（“电子邮件”）；
const[loggedIn，setLoggedIn]=useState（localStorage.getItem（“logged”）；
返回(
{
返回loggedIn(
) : (
);
}}
>
{洛格丁(
) : (
)}
{洛格丁(
) : (
)}
);
}

这是一个处理状态更新的登录页面，它应该更新应用程序的状态并重定向到/users，它会这样做，但不会呈现它

function Login() {
  const [email, setEmail] = useState("");
  const [validEmail, setValidEmail] = useState(false);
  const { loggedIn, setLoggedIn, setSavedEmail } = useContext(PropContext);

  const handleClick = () => {
    if (!localStorage.getItem("email")) {
      setSavedEmail(email);
      localStorage.setItem("email", email);
      setLoggedIn(true);
      localStorage.setItem("logged", true);
      console.log("if");
    } else if (localStorage.getItem("email") === email) {
      setLoggedIn(true);
      localStorage.setItem("logged", true);
      console.log("else if");
    }
  };

  const emailIsValid = () =>
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
      email
    );

  useEffect(() => {
    emailIsValid(email) ? setValidEmail(true) : setValidEmail(false);
  }, [email]);
  return (
    <div>
      <input
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        type="email"
        name="email"
        id="email"
        required
      />
      <button disabled={!validEmail} onClick={() => handleClick()}>
        Log in
      </button>
    </div>
  );
}

函数登录（）{
const[email，setEmail]=useState（“”）；
const[validEmail，setValidEmail]=使用状态（false）；
const{loggedIn，setLoggedIn，setSavedEmail}=useContext（PropContext）；
常量handleClick=（）=>{
如果（！localStorage.getItem（“电子邮件”））{
setSavedEmail（电子邮件）；
setItem（“email”，email）；
setLoggedIn（真）；
setItem（“logged”，true）；
控制台日志（“如果”）；
}else if（localStorage.getItem（“电子邮件”）==电子邮件）{
setLoggedIn（真）；
setItem（“logged”，true）；
控制台日志（“其他如果”）；
}
};
const emailIsValid=（）=>
/^（[^（）[\]\\，；：\s@“]+（\.[^（）[\]\\，；：\s@“]+）*）（“+”）（\[[0-9]{1,3}\.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.]））（[a-zA Z-0-9]++.[a-zA Z-Z]{2，}$/(
电子邮件
);
useffect（（）=>{
emailIsValid（电子邮件）？setValidEmail（真）：setValidEmail（假）；
}，[电邮]；
返回(
setEmail（e.target.value）}
type=“电子邮件”
name=“电子邮件”
id=“电子邮件”
必修的
/>
handleClick（）}>
登录
);
}

这里的问题是您的“路线”似乎没有重新评估。将每个路由/重定向包装在渲染的

路由中

<Switch>
  <Route
    path="/login"
    render={() =>
      loggedIn ? (
        <Redirect to="/users" />
      ) : (
        <Route exact path="/login" component={Login} />
      )
    }
  />
  <Route
    path="/users"
    render={() =>
      loggedIn ? (
        <Route exact path="/users" component={Users} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
  <Redirect from="/" to={loggedIn ? "/users" : "/login"} />
</Switch>

洛格丁？(
) : (
)
}
/>
洛格丁？(
) : (
)
}
/>

---

尝试制定一个工作示例，当

登录

或

用户

中的一个正在更新状态时，

PropContext.Provider

如何处理假定已更新的状态？它是否真的会导致在

应用程序中更新状态？你能分享你的背景吗？先生，你是救命恩人。感谢you@VeljkoS欢迎如果你觉得答案有用，别忘了投票。干杯