React Router v4 при изменении

Question

Я занимаюсь разработкой обычного приложения React JS и использую BrowserRouter.Мне нужно знать, когда меняется маршрут, и единственное, что я нашел, - это использовать пакет истории теми же парнями (реакция-тренировка).

Их пример выглядит достаточно простым, но неу меня все работает:

import createHistory from 'history/createBrowserHistory'
const history = createHistory()

console.log('a')
history.listen((location, action) => {
    console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`)
    console.log(`The last navigation action was ${action}`)
})


const A = props => <div>A <NavLink to="/b">b</NavLink></div>
const B = props => <div>B <NavLink to="/a">a</NavLink></div>

ReactDOM.render(
    <BrowserRouter>
        <div>
            <Route path="/a" component={A}/>
            <Route path="/b" component={B}/>
        </div>
    </BrowserRouter>,
    document.getElementById('app')
)

Консоль печатает «а», но при нажатии я не получаю ответный вызов listen, и мой URL меняется.

Больше ничего не происходитих документация, так кто-нибудь знает, чего не хватает?

Answer 1

Если вы хотите прослушать изменения маршрута таким образом, я думаю, что вы должны использовать Router, а не BrowserRouter и дать ему свой новый созданный history в качестве реквизита.

Вот код с изменениями:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory'

const history = createHistory()

history.listen((location, action) => {
     console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`)
     console.log(`The last navigation action was ${action}`)
})


const A = props => <div>A <Link to="/b">b</Link></div>
const B = props => <div>B <Link to="/a">a</Link></div>

ReactDOM.render(
  <Router history={history}>
    <div>
        <div>Hello!</div>
        <Route path="/a" component={A}/>
        <Route path="/b" component={B}/>
    </div>
  </Router>,
  document.getElementById('root')
)

А вот и журнал консоли, который я получил:

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