React上下文和hookrouter在组件挂载时不会重定向。

我正在尝试使用CodeSandbox (这里) “复制”我的真实项目。我有一个登录表单，当登录时，它会设置一个带有身份验证数据的cookie。当组件挂载时，它应该检查该cookie，并在存在时重定向回组件。

在我的情况下，这并不像预期的那样工作，因为它会等待我在表单中写入一些内容。

根据hookrouter文档，navigate()应该像react-router-dom的组件一样工作。

所以，这是项目的src文件夹结构：

• src
  • index.js
  • components
    • pages
      • Home
        • index.js
      • Login
        • index.js
  • context
    • Auth
      • auth.js
      • index.js

代码：

App：src/index.js

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { useRoutes, A, navigate } from "hookrouter";
import { useCookies } from "react-cookie";
import HomePage from "./components/pages/Home";
import LoginPage from "./components/pages/Login";
import AuthContextWrapper from "./context/Auth";
const Logout = () => {
  const [cookies, setCookie, removeCookie] = useCookies(["token"]);
  useEffect(() => {
    console.log("Logout triggered");
    removeCookie("token");
    navigate("/", true);
  }, []);
  return Closing session;
};
const routes = {
  "/": () => ,
  "/login": () => ,
  "/logout": () => 
};
const App = () => {
  const Router = useRoutes(routes);
  return Router ? (
    {Router}
  ) : (
    

      Error 404: Go back
    
  );
};
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

：src/components/pages/Home/index.js

import React, { Fragment, useContext } from "react";
import { A } from "hookrouter";
import AuthContext from "../../../context/Auth/auth";
const HomePage = () => {
  const context = useContext(AuthContext);
  console.log("Home context", context);
  return (
    
      Login page
      {context.token.length ? Logout : ""}
    
  );
};
export default HomePage;

：src/components/pages/Login/index.js

import React, { useState, useContext, useEffect } from "react";
import AuthContext from "../../../context/Auth/auth";
import { navigate } from "hookrouter";
const LoginPage = () => {
  const context = useContext(AuthContext);
  const [emailState, setEmailState] = useState("");
  const [passwordState, setPasswordState] = useState("");
  const [statusState, setStatusState] = useState({
    color: "black",
    status: ""
  });
  useEffect(() => {
    console.log("Login context:", context);
    if (context.token) {
      navigate("/");
    }
  }, []);
  return (
    

       setEmailState(e.target.value)}
        placeholder="Email"
      />
       setPasswordState(e.target.value)}
        placeholder="Password"
        type="password"
      />
      
{statusState.status}
      Login
    
  );
  async function handleSubmit(e) {
    e.preventDefault();
    setStatusState({
      color: "blue",
      status: "Validating"
    });
    await context.login(emailState, passwordState);
    if (context.error) {
      setStatusState({
        color: "red",
        status: context.error
      });
    }
    if (context.token) {
      navigate("/");
    }
  }
};
export default LoginPage;

：src/context/Auth/index.js

import React, { useEffect } from "react";
import Context from "./auth";
import { useCookies } from "react-cookie";
const AuthContextWrapper = props => {
  const [cookies, setCookie] = useCookies(["token"]);
  const defaultValue = {
    token: "",
    error: "",
    loading: false,
    login: async (email, password) => {
      setTimeout(() => {
        defaultValue.loading = true;
        if (password !== "123") {
          defaultValue.error = "Wrong credentials";
        } else {
          defaultValue.error = "";
          defaultValue.token = "jwtencodedtoken$123";
          setCookie("token", defaultValue.token);
        }
      }, 1000);
      defaultValue.loading = false;
    }
  };
  useEffect(() => {
    if (cookies.token) {
      defaultValue.token = cookies.token;
    }
  });
  return (
    {props.children}
  );
};
export default AuthContextWrapper;

所以，我想我刚刚被搞晕了... 这是一个在CodeSandbox中运行的示例。可能是hooks出了问题（我还在学习中）。

为什么这不起作用？我做错了什么？欢迎任何评论。