React Router 4 prevent pages from reloading

So here is my router structure:

<Router>
    <div>
        <Route path="/" exact component={ Login } />
        <Route path="/timeline" component={ requireAuth(Timeline) } />
        <Route path="/chat/:id" component={ requireAuth(Chat) }/>
    </div>
</Router>

requireAuth() is a simple HOC component that makes an API call and based on the response renders <ComposedComponent {...this.props} /> or <Redirect to="/" />

I am facing two problems:

1. requireAuth() gets called everytime I go from /timeline to /chat/XXX
2. When I go from /timeline to /chat/xxx thr browser reloads the page.

How can I fix this? I guess I should somehow wrap my routes that require authentication?...

Update

So I spent some time I came up with this logic:

ReactDOM.render((

    <div>
        <Router>
            <Switch>
                <Route exact path="/" component={Login} />
                <App>
                    <Route path="/timeline" component={Timeline} />
                    <Route path="/chat/:id" component={Chat} />
                </App>
            </Switch>
        </Router>
    </div>


), document.getElementById('root'))

My auth logic now lives in App.js and gets called only once when I try to open any route inside the <App></App> part.