React-Router using a loading page while fetching a DB - api

Question

So, I finished my app using React Router and everything works as expected. When the user enters the page, he gets redirected to a loading screen while my App component fetches a DB, and after the fetch is done the user gets redirected to the category that was fetched.
/ -> <Loader /> -> /App().state.data[0].category.
The fetch is done so fast that the user cannot even see the loading screen, as expected. So the user experiences.
/ -> /App().state.data[0].category.
So my problem is that when the user is on the /App().state.data[0].category page, and he hits the back button, he will see and stay on the loading screen. So he basically has to double click to go back to the previous page. This is not desired.
What the user experiences
/App().state.data[0].category -> <Loader /> -> Page before entering the "/"
What the user should experience
/App().state.data[0].category -> Page before entering the "/"
My Question is there a way to jump the loading screen if the user presses the back button?
I started looking into the history npm thing, am I on the right track?
My current config looks like this in pseudocode:
main.js
render(
<Router history={hashHistory}>
<Route path="/" component={App}>
/* This returns the first category from my api */
<IndexRedirect to={App().state.data[0].category} />
<Route path=":category" component={App} />
</Route>
</Router>
,document.getElementById('main'));
App.js
class App extends React.Component{
componentWillMount() {
const router = this.context.router;
fetchData().then(function(results){
router.push(results.data[0].category);
})
}
render() {
return (<Loader/>);
}
}

Answer 1

why not do a conditional render on a single component.
if database -> render the page
else -> render the loader
as soon as your db fetch is complete, the render will mount and you will see your page instead of your loader