登录功能后history.push不起作用

Question

我尝试history.push()在设置令牌后使用。不知何故，页面没有重定向到新路径。我已经使用了useHistory访问历史记录的功能。一旦我重新加载页面，它就会重定向到主页。我尝试了其他类型的黑客但无法找到解决方案。请帮忙。应用程序.jsfunction App() {  const [isAuthenticated, setAuthenticated] = useState(false);  useEffect(()=>{    if(cookie.get('authorization')){      setAuthenticated(true);    }    else{      setAuthenticated(false);    }  },[])  return (    <Router>      <Switch>        <Route exact path="/">          {isAuthenticated?<Redirect to="/home"/>:<Login />}        </Route>        <PrivateRoute exact path="/user/:id" component={UserDetail} auth={isAuthenticated} />        <PrivateRoute exact path="/createuser" component={CreateUser} auth={isAuthenticated} />        <PrivateRoute exact path="/home" component={ListUser} auth={isAuthenticated} />      </Switch>    </Router>  );}export default App;登录.jsimport React, { useEffect, useState } from 'react';import {useHistory} from 'react-router-dom';function Login() {    const history = useHistory();    const loginUser = (body) => {        SetLoader(true);        fetch('/api/v2/users/tokens', {            method: 'POST',            body: JSON.stringify(body),            headers: {                'Content-Type': 'application/json',            }        })            .then(response => {                SetLoader(false);                if (response.status == 200) {                    SetError(false);                       cookie.set('authorization',response.headers.map.authorization,{path:'/'});                    history.push('/');                }                else {                    SetError(true);                    StoreResponse(JSON.parse(response._bodyInit).message);                }            })            .catch((error) => {                console.error('Error:', error);            });    }}export default Login;

Answer 1

我没有看到组件history中定义的位置Login。此外，您还设置了 cookie，但isAuthenticated仅在App组件安装时设置，以后绝不会更新。

您可以传递回调来Login更新状态，并在重新渲染和重新渲染具有重新封闭状态的路由App时让重定向自然发生。它还已经尝试专门匹配和渲染路线，因此将您的路径从最具体到最不具体排序，并且您不需要将 prop 添加到每个路线。AppisAuthenticatedSwitchexact

应用程序

function App() {

  const [isAuthenticated, setAuthenticated] = useState(false);

  useEffect(() => {

    if (cookie.get("authorization")) {

      setAuthenticated(true);

    } else {

      setAuthenticated(false);

    }

  }, []);

  return (

    <Router>

      <Switch>

        <PrivateRoute

          path="/user/:id"

          component={UserDetail}

          auth={isAuthenticated}

        />

        <PrivateRoute

          path="/createuser"

          component={CreateUser}

          auth={isAuthenticated}

        />

        <PrivateRoute

          path="/home"

          component={ListUser}

          auth={isAuthenticated}

        />

        <Route path="/">

          {isAuthenticated ? (

            <Redirect to="/home" />

          ) : (

            <Login setAuthenticated={setAuthenticated} /> // <-- pass callback

          )}

        </Route>

      </Switch>

    </Router>

  );

}

登录

function Login({ setAuthenticated }) { // <-- destructure prop

  const loginUser = (body) => {

    SetLoader(true);

    fetch("/api/v2/users/tokens", {

      method: "POST",

      body: JSON.stringify(body),

      headers: {

        "Content-Type": "application/json"

      }

    })

      .then((response) => {

        if (response.status == 200) {

          SetError(false);

          cookie.set("authorization", response.headers.map.authorization, {

            path: "/"

          });

          setAuthenticated(true); // <-- set authenticated

        } else {

          SetError(true);

          StoreResponse(JSON.parse(response._bodyInit).message);

        }

      })

      .catch((error) => {

        console.error("Error:", error);

      })

      .finally(() => {

        SetLoader(false); // <-- set loading false in finally block

      });

  };

  ...

}