javascript - 重新路由后组件不呈现

Question

我有一个问题，当我输入有效的电子邮件并将记录的状态设置为 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>
    </>
  );
}

这是处理状态更新的登录页面，它应该更新应用程序的状态并重定向到 /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>
  );
}

标签： javascriptreactjsreact-router-dom

Answer 1

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

<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>