Блог

У меня есть ajax-логин в приложении React. Он обрабатывает компонент 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 выглядит следующим образом

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

Если вы используете функциональные компоненты, вы можете использовать useHistory хук, предоставляемый react-router-dom .

При успешном входе перенаправьте на домашнюю страницу, как показано ниже:

 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, который является одним из prop, переданных с маршрутизатора React. Это также будет работать в компонентах на основе классов.

 class Login {
     ...

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

    ...
}
  

Если Login компоненту не передаются реквизиты маршрутизатора из-за иерархии компонентов в вашем приложении, то вы можете использовать withRouter компонент более высокого порядка для получения доступа к history объекту.

 import { withRouter } from "react-router";

class Login {
   ...
}

export default withRouter(Login);
  

Подробности см.:

• История использования
• история
• С маршрутизатором