登录后反应重定向

Posted 2023-02-21

【中文标题】登录后反应重定向

【英文标题】：React redirect after login

【发布时间】：2020-12-03 17:23:55

【问题描述】：

我在 React 应用中有一个 ajax 登录。它处理 LoginForm 组件。应用程序也使用React router ajax 登录后，我想做一些类似重定向到另一个 React 页面的操作。成功登录后，我不知道如何正确地从登录页面重定向到主页。有人可以帮我吗？我正在使用类样式来制作组件。

这是来自 LoginForm 组件的代码：

    sendData(e)
    
        e.preventDefault();
        this.setState('errors': [], 'success': []);

        let formData = new FormData();
        formData.set('name', this.state.name);
        formData.set('password', this.state.password);

        axios(
            method: 'POST',
            //url: 'http://localhost:8000/login'
            data: formData,
            headers: 
                'Content-Type': 'text/html',
                'X-Requested-With': 'XMLHttpRequest',
            
        )
            .then(response => 
               // Here should be the redirect to another React page
            )
            .catch(response => 
                this.setState(errors: ['Login fails. Try it again later please.'])
            );
    

React Router 的样子

<div className="collapse navbar-collapse" id="navbarSupportedContent">
    <ul className="navbar-nav mr-auto">
        <li className="nav-item">
            <NavLink to="/" className="nav-link">Home</NavLink>
        </li>
        <li className="nav-item">
            <NavLink to="/login" className="nav-link">Login</NavLink>
        </li>
        <li className="nav-item">
            <NavLink to="/about" className="nav-link">About</NavLink>
        </li>
    </ul>
</div>
<div className="container-fluid">
    <div>
        <Switch>
            <Route path="/" exact>
                <Home />
            </Route>
            <Route path="/login">
                <Login />
            </Route>
            <Route path="/about" component=About/>
        </Switch>
    </div>
</div>

【参考方案1】：

如果你使用的是功能组件，你可以使用react-router-dom提供的useHistory钩子。

登录成功后，跳转到首页，如下图：

import  useHistory  from 'react-router-dom';

const Login = () => 
   const routerHistory = useHistory();
   ...

   const sendData = (e) => 
      ...
      .then(response => 
         // Here should be the redirect to another React page
         routerHistory.push('/');
      ) 
      ...
   
   
   ...

你也可以使用history prop，它是从 React Router 传递的 prop 之一。这也适用于基于类的组件。

class Login 
     ...

     sendData(e) 
        ...
        .then(response => 
           // Here should be the redirect to another React page
           this.props.history.push('/');
        )
        ...
      

    ...

如果 Login 组件由于您应用中组件的层次结构而没有传递路由器 props，那么您可以使用 withRouter 高阶组件来访问 history 对象。

import  withRouter  from "react-router";

class Login 
   ...


export default withRouter(Login);

详情见：

useHistory history withRouter

【讨论】：

我正在使用类组件。你能给出类的解决方案吗？

我收到错误历史未定义。在 LoginForm 中，我创建了import History from "react-router-dom"，但我不确定如何将历史记录添加到组件中。很抱歉我从 React 开始。