How to create a Single Page Application using react-router

I am quite new to React.js but I'm building a single page application using it. For routing I am using react-router.

The way I want to organize my page is as following: I want to have an static header and footer(loaded only ONCE), and then the content of the page that will change depending on the route. Nothing special here, this is basically my understanding of SPA.

This is the main.js that bootstraps my app with the routes:

const store = configureStore();
ReactDOM.render(
<Provider store={store}>
    <Router history={history}>
        <Route path="/" component={App}>
            <IndexRoute component={Home}/>

            <Route path="shop-filters-left-3cols" component={ShopFiltersLeft3Cols}/>
            <Route path="about" component={About}/>
            <Route path="login" component={Login}/>

        </Route>
    </Router>
</Provider>,
document.getElementById('main')
);

And this is the component App which is basically containing the structure of the single page:

export class App extends React.Component {

constructor(){
    super();
    this.render = this.render.bind(this);


}

render() {
    console.log('Rendering App');

    return (<div>
        <LoginModal />
        <Header/>
        <div className="page-content">
            {this.props.children}
        </div>
        <Footer/>
    </div>);
}

}

So when I access the app, the component 'App' is loaded, and then the component 'Home' in injected into the main content as it is declared as IndexRoute.

Everything is fine until here, the problem is that every time I switch from a route to another, the component 'App' gets rendered( I know it because I see the 'Rendering App' log in the console). And this is what I don't understand, to my understanding, switching between routes shouldn't trigger a render of the 'App' component but only of the component that is being injected dynamically.

I don't want the header and footer to be rendered every time I switch a route, this is IMHO the benefit of having a single page application. Maybe I'm not understading well how react-router works, could someone please help me with that? Or if I'm doing something wrong please tell me what is the right way to achieve what I need.

If you need to see any other code don't hesitate to ask. Thank you