BrowserHistory.push не переходит на новую страницу

Я установил browserHistory на маршрутизаторе с этим (response-router 2.0):

import { browserHistory } from 'react-router'

function requireAuth(nextState, replace) {
    if (!services.auth.loggedIn()) {
        replace({
            pathname: '/login',
            state: { nextPathname: nextState.location.pathname }
        })
    }
}

export default (store) => (
  <Router history={browserHistory}>
    <Route path='/' component={AppLayout}>
      <Route path="login" component={LoginContainer} />
      <Route path="map" component={MapContainer} onEnter={requireAuth} />
    </Route>
  </Router>
);

Затем я пытаюсь использовать browserHistory в response-router для программного перехода на новую страницу из представления, ala:

 import { browserHistory } from 'react-router'

 ...

 browserHistory.push('/map');

Это изменяет URL-адрес на /map, но не отображает компоненты в этом маршруте. Что я делаю неправильно?

Ответ 1

Как упоминалось в моем комментарии, у меня была такая же проблема, но я нашел способ заставить ее работать.

Что здесь происходит, ваш маршрут меняется, но ваш компонент AppLayout фактически не обновляет его автоматически. Маршрутизатор, похоже, автоматически не приводит к изменению состояния компонента. В принципе, this.state.children в вашем AppLayout не обновляется новыми детьми.

Решение, которое я нашел (и, полное раскрытие, я не знаю, так ли это, как вы должны это достичь, или если это лучшая практика) заключается в использовании функции componentWillReceiveProps и обновления this.state.children с детьми из новых реквизитов:

componentWillReceiveProps(nextProps) {
    this.setState({
        children: nextProps.children
    });
}

Надеюсь, это поможет!

Ответ 2

Альтернативное решение, позволяющее маршрутизатору перейти в другой раздел вашего приложения без принудительного обновления с помощью метода жизненного цикла, - это использовать контекстный маршрутизатор. Все, что вам нужно, - объявить contextType в вашем компоненте (для краткости не указывать экземпляр маршрутизатора и другой код):

class MyComp extends Component {
  static contextTypes = {
    router: PropTypes.object
  }

  handleClick = () => {
    this.context.router.push('/other/route')
  }
}

По причинам, о которых я не знаю, браузерHistory.push() не работал у меня, хотя браузерHistory.goBack() и .goForward() сделал.