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

Posted 2023-03-16

【中文标题】登录功能后history.push不起作用

【英文标题】：history.push is not working after login function

【发布时间】：2021-03-11 08:13:51

【问题描述】：

我在设置令牌后尝试使用history.push()。不知何故，页面不会重定向到新路径。我使用useHistory 功能来访问历史记录。一旦我重新加载页面，它就会重定向到主页。我尝试了其他类型的黑客，但无法找到解决方案。请帮忙。

App.js

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

login.js

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

【问题讨论】：

我看不到const history = useHistory() 部分。也许添加应该有效。

我添加了@Chanandrei。那里没有显示。

【参考方案1】：

我看不到 history 在 Login 组件中的定义位置。此外，您设置了 cookie，但 isAuthenticated 仅在 App 组件挂载时设置，以后永远不会更新。

您可以将回调传递给Login 以更新App 中的状态，并让重定向在App 重新渲染时自然发生，并重新渲染具有重新封闭的isAuthenticated 状态的路由。 Switch 也已经尝试专门匹配和渲染路由，因此将路径从最具体到最不具体进行排序，您不需要将exact 属性添加到每个路由。

应用程序

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

  ...

【讨论】：

谢谢。回调方法有效。我从 react-router-dom 导入了 useHistory。我在这里的代码中没有提到它。现在我已经更新了代码。仍然 history.push 不起作用。

@SriharshaK Login 是一个功能组件并且它在Router 中呈现，所以我看不出为什么@987654335 @ 不会工作。你能提供更多关于什么不起作用的细节吗？有错误吗？它会导航吗？

@DrewReese 我遇到了同样的问题，虽然这确实启动了重定向，但我收到了这个错误：Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. 我没有使用componentDidUpdate 或componentDidUpdate，只是useEffect和你上面给出的基本相同的配置。

@idanicoleherbert useEffect 具有依赖关系，相当于基于类的组件的 componentDidUpdate 生命周期方法。您可能会无条件地更新某些依赖于效果的状态。这是一个新问题吗？随意问一个新的 SO 问题，并在这里（在）我，我可以看看。

@DrewReese 感谢您的快速响应，我设法通过删除 App 中的 useEffect 来修复它，保留三元路由器并在登录后请求中添加 window.location.reload() 而不是设置器^~^