React v4 и Redux: обновить URL после вызова API, чтобы показать новый маршрут?

Question

В моем приложении React я пытаюсь направить пользователя к "/" после успешного входа в систему.Если возможно, мне нужно, чтобы страница после не обновлялась после успешного входа в систему.Вот код, который я использую для вызова API (когда отправленные данные аутентифицируются, отправляются resp.data):

handleFormSubmit = event => {
    event.preventDefault();
    API.signin({
      username: this.state.username,
      password: this.state.password
    }).then(resp => {
      if (resp.data) {

      // console.log(resp);
      // window.location.replace(resp.data);
      window.history.pushState({}, null, resp.data);

    } else {
      console.log("Authentication was unsuccessful, or passport did not send back information.")
    }
    }).catch(function (error) {
      console.log(error);
    });
  }

Использование window.history.pushState({}, null, resp.data); работает для изменения URL-адреса.Однако компоненты не обновляются (у меня есть маршруты BrowserRouter, указанные для / login, / signup и /).Кроме того, window.location.replace(resp.data); обновляет страницу.Есть ли способ сделать это через реакцию?

Answer 1

Вы можете использовать withRouter HoC, предоставляемый пакетом react-router, для добавления некоторых свойств в ваши компоненты.Вас интересует объект истории из react-router, а не объект истории в окне.

import {withRouter} from 'react-router'

class MyComponent extends React.PureComponent {
  handleFormSubmit = event => {
    ...
    API.signin({
      ...
    }).then(resp => {
      if(resp.data) {
        const {history} = this.props
        history.push('/', {
          data
        })
      }
    })
  }
}

export default withRouter(MyComponent)

Использование withRouter сделает {match, location, history} объектов доступными в вашем компоненте.С помощью приведенного выше шаблона ваш пользователь будет перенаправлен на ваш маршрут '/', если у вас есть <Route path='/'/> компонент в вашем дереве <Router/>.data будет доступен на location.state.data.(Вам также нужно обернуть свой домашний компонент с помощью withRouter, чтобы иметь доступ к объекту location.