Изменить маршрут после выполнения функции в ReactJs - PullRequest
Новая
       3

Изменить маршрут после выполнения функции в ReactJs

0 голосов
/ 02 апреля 2020

так что я пытаюсь сделать, я хочу изменить Route после выполнения функции, например, я хочу, чтобы пользователь ввел свое имя пользователя и пароль, и если они были истинными, перенаправьте их в свой профиль, но я не знаю, как это сделать, и я не хочу делать это, используя что-то вроде 

window.location.href = "http://localhost:3000/dashboard"

, например, вот мой код, и я хочу перенаправить его в Dashboard после api вызов завершен. 

const handleSubmit = event => {
      event.preventDefault();

      const user = {
            phone_number: this.state.phone_number,
            password: this.state.password,
            gcm_id: 1,
            dev_type: "Web"
       };
       const headers = {
            'Authorization': "abc",
            'content-type': 'application/json'
       }
       localStorage.setItem('phone_number', this.state.phone_number);
       axios.post(`sth`, user, {
             headers: headers
       })
             .then(res => {
             localStorage.setItem('api_key', res.data.api_key)
             })
             .catch(err => { console.log(err) })
}

Здесь я хочу, чтобы он изменил маршрут после установки `api_key '.

Ответы [ 2 ]

2 голосов
/ 02 апреля 2020

Оберните ваш классный компонент с withRouter HO C, предоставленным от react-router.

import { withRouter } from "react-router";

Затем, в случае успеха, добавьте это 

.then(res => {
  localStorage.setItem('api_key', res.data.api_key);
  this.props.history.push('dashboard');
})

если вы используете функциональный компонент: 

import { useHistory} from "react-router-dom";

const history = useHistory();

.then(res => {
  localStorage.setItem('api_key', res.data.api_key);
  history.push('dashboard');
})
2 голосов
/ 02 апреля 2020

Вам нужно добавить this.props.history.push('/dashboard') после того, как ключ API настроен для маршрутизации на соответствующую страницу.

Также добавьте withRouter к экспорту класса, например export default withRouter(Register)

...