React router 4 history.listen never fires

Question

Switched to router v4 and history v4.5.1 and now history listener not working

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

history.listen((location, action) => {
  console.log(action, location.pathname, location.state)  //  <=== Never happens
})

render(
  <Provider store={store}>
    <Router history={history}>
      ...
    </Router>
  </Provider>,
  document.getElementById('root')
)

Any ideas why it is being ignored?

What's the Router you are using here? is that BrowserRouter or Router? I'm asking this because some people import BrowserRouter with named import like this. `import { BrowserRouter as Router } from 'react-router-dom'` — Tharaka Wijebandara, May 21 '17 at 10:53

Tharaka Wijebandara · Answer 1 · 2017-05-21T11:33:52.910

15

Since you are using BrowserRouter(with import alias Router as mentioned in comments of the question), it doesn't care the history prop you pass in. Instead of that it internally creates and assigns new browser history to the Router. So the history instance that you listen and being used in Router is not the same. That's why your listener doesn't work.

Import the original Router.

import { Router } from 'react-router-dom';

It will work as you expect.

edited May 21 '17 at 11:33

answered May 21 '17 at 11:10

Tharaka Wijebandara

7,955
1
28
49

1

The "original router" is v3. I am using v4 and there is no `'react-router'`, only `'react-router-dom'` with `BrowserRouter ` and `HashRouter` – ilyo May 21 '17 at 11:12
But still, you can import Router from 'react-router-dom'. Try `import { Router } from 'react-router-dom';` It should work. – Tharaka Wijebandara May 21 '17 at 11:13
1

Still makes no difference – ilyo May 21 '17 at 11:17
1

Can't guess what's the reason. But it works for me https://codesandbox.io/s/9WrAYvjP – Tharaka Wijebandara May 21 '17 at 11:25
I can confirm this also works for me with React Router v4. – Todd Chaffee May 21 '17 at 15:25
It's possible that this is the issue... `const history = createBrowserHistory()`. Try `createHistory()` – Max Phillips Jul 01 '17 at 03:16

score 3 · Answer 2 · answered Mar 22 '18 at 11:10

The problem is that you are creating your own history object and passing it into the router. However, React Router v4 already provides this object for you, via this.props. (Importing Router has nothing to do with this)

componentDidMount() {
    this.props.history.listen((location, action) => console.log('History changed!', location, action));
}

You may need to layer your app a bit more though, like below, and put this componentDidMount method in your MyApp.jsx and not directly at the very top level.

<Provider store={store}>
    <BrowserRouter>
        <MyApp/>
    </BrowserRouter>
</Provider>

(Or use NativeRouter instead of BrowserRouter if you're doing React Native)

Sticking with the BrowserRouter solution, to get access to the history, one might create a ref on the router and proceed to listen via the componentDidMount or useEffect on the level(s) above the BrowseRouter. This way you don't need to add an extra component layer underneath BrowserRouter. — mcksn, Apr 05 '20 at 07:00

score -1 · Answer 3 · answered Mar 24 '21 at 13:55

works like a magic: ‍♂️‍♂️‍♂️

const history = useHistory();      
    
     useEffect(() => {
            if (history) { // for jest sake ))
                history.listen(() => {
                    store.reset();
                });
            }
     }, []);

React router 4 history.listen never fires

3 Answers3

Linked