Proper place to setup React Router history listener

Question

I'm trying to set up a history listener at the topmost level so that every time the location changes, some code is executed (Google Analytics tracking in my case).

Currently, my App.js looks like this:

    render() {
        return (
            <BrowserRouter>
                <Switch>
                    <Route path="/" exact component={Home}/>
                    <Route path="/" component={MainLayout}/>
                </Switch>
            </BrowserRouter>
        );
    }

As I understand, I can only use history inside BrowserRouter, but it can only have one child, so I can only put it inside Switch, but then I'll have to put it inside every component under Switch, which I can't do since I want it to run only once. If I just add a custom component under Switch without wrapping it into a Router, there's no history.

What should I change to make it work? Is it possible to get an instance of history in the App.js code? Is it possible to achieve using a custom component or a HOC?

Answer 1

Found out that the easiest option is the Update component -- https://github.com/pshrmn/rrc/blob/master/docs/OnUpdate.md