history.listen not working correctly inside React Router

Question

I want to be able to call a function every time React recognises the url has changed, but am having trouble with history.listen not firing (the console.log is never printed). I have seen posts saying that this is because I'm using BrowserRouter, but I am getting errors saying "cannot find x inside react-router" whenever I try importing anything from react-router. I currently have react-router and react-router-dom versions 4.1.2

App.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import { BrowserRouter, Route, Redirect, Link } from 'react-router-dom';

import './App.css';
import reducers from './common/reducers'
import Routes from './common/Routes';
import RoutesWrapper from './components/RoutesWrapper';
import Login from './Login';

class App extends Component {

    render() {
        const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

        return (
            <Provider store={store}>
                <BrowserRouter>
                    <Login>
                        <div className="App">
                            <div className="widgetCont">
                                <Routes wrapper={RoutesWrapper}/>
                            </div>
                        </div>
                    </Login>
                </BrowserRouter>
            </Provider>
        );
    }
}

export default App;
export { Route, Redirect, Link };

Routes.js

import React, { Component } from 'react';
import createHistory from 'history/createBrowserHistory';

import { Route } from '../App.js';
import PredictionsCompletedContainer from './containers/PredictionsCompletedContainer';
import GameContainer from './containers/GameContainer';

class Routes extends Component {


    render() {
        const Wrapper = this.props.wrapper;

        const history = createHistory();
        history.listen((location, action) => {
            console.log("inside history listen");
        });

        return (
            <Wrapper>
                <Route exact path="/" component={GameContainer}/>
                <Route path="/predictions-completed" component={PredictionsCompletedContainer}/>
            </Wrapper>
        );
    }
}

export default Routes;

Solution

With every re-rendering of component, render is getting called.

It causing, listener getting removed as you initialising history object.

Its better,put it inside component life cycle componentDidMount which going to called only once in life.

componentDidMount(){

    const history = createHistory();
        history.listen((location, action) => {
            console.log("inside history listen");
        });
}

EDIT :

Its look like,you need to integrate the react-router-redux.

Please refer answer here.

Comments

[jSutcliffe90]

Thanks for your help, I'm still not seeing the console log though unfortunately