history.listen не запускается в componentDidMount

Я использую response-router v4 для маршрутизации, чтобы проанализировать параметры запроса, рекомендуется использовать history.listen здесь

Я вызываю его в ловушке жизненного цикла componentDidMount, чтобы убедиться, что компонент смонтирован, чтобы я мог предоставить его как часть состояния компонента, используя компонент более высокого порядка следующим образом:

import createHistory from 'history/createBrowserHistory';
import qs from 'qs';
import { compose, lifecycle, withState } from 'recompose';

export const history = createHistory();
const withQs = compose(
  withState('search', 'setSearch', {}),
  lifecycle({
    componentDidMount: function () {
      // works on the client side
      history.listen(() => {
        // history.location = Object.assign(history.location,
          // parse the search string using your package of choice
        // { query: parseQueryString(history.location.search) }
        // )
        console.log('History Location', history.location);
        console.log('Search', history.location.search);
      })
    }
  })
)

export default withQs

history.listen никогда не запускается, когда маршрут переходит на новую страницу или на страницу добавляется новый параметр запроса.


reactjs javascript react-router react-router-v4
person vamsiampolu    schedule 19.04.2017    source источник
comment
Используете ли вы один и тот же экспортированный history экземпляр в своем проекте? т.е. вы используете его для рендеринга <Router history={history}>?   -  person Paul S    schedule 20.04.2017
comment
Можете ли вы предоставить более полный пример вашего кода, показывающий, где вы используете компоненты React Router V4?   -  person Todd Chaffee    schedule 20.04.2017
comment
У меня также есть проблемы с listen() не срабатывает. У меня есть история, связанная с историей моего маршрутизатора, например: <Router history={history}>, и я ожидаю, что listen() сработает при изменении маршрута, но этого не происходит.   -  person Troy Carlson    schedule 20.04.2017
comment
@PaulS да, но я должен упомянуть, что использую import BrowserRouter as Router from react-router-dom.   -  person vamsiampolu    schedule 22.04.2017
comment
@ToddChaffee Я могу связать вас с репозиторием github здесь, hoc is here С тех пор я заменил его на global я не доволен. Я удалил перекомпоновку, чтобы упростить ее, но более старые коммиты будут показывать версию, в которой используется перекомпоновка.   -  person vamsiampolu    schedule 22.04.2017
comment
Вам нужно использовать <Router>, а не <BrowserRouter>. <BrowserRouter> создает свой собственный history экземпляр.   -  person Paul S    schedule 22.04.2017

Ответы (1)


arrow_upward
4
arrow_downward

Согласно документам React Router V4, если вы хотите самостоятельно управлять историей, вы необходимо использовать <Router> вместо <BrowserRouter>:

import { Router } from 'react-router'
import createBrowserHistory from 'history/createBrowserHistory'

const history = createBrowserHistory()

<Router history={history}>
  <App/>
</Router>
person Todd Chaffee    schedule 22.04.2017