React-router first fetch required data, then show current route's component - reactjs

Question

What's the best way of making sure that my react app has all the data needed when I am using react router? Basically I want to fetch some basic data that are used across whole application, the problem is that when I did it "the easy way" some of my data are fetched twice.
When I enter index route (Dashboard) it first mount this component and fire this.props.fetchAllProjects(), than it mount Loader component and fire this.props.fetchUsersInfo() so it shows just Spinner component and after user info data are fetched id again mount Dashboard and fire this.props.fetchAllProjects() is there any good way of doing this?
Here's my current code:
AppRouter.jsx
<Router history={browserHistory}>
<Route component={Loader}>
<Route path="/" component={MainLayout}>
<IndexRoute components={{ rightSidebar: RightSidebar, main: Dashboard }} />
<Route path="accounts" components={{ rightSidebar: RightSidebar, main: Accounts }} />
</Route>
</Route>
<Route path="*" component={PageNotFound} />
Loader.jsx
import React from 'react';
import { connect } from 'react-redux';
import { fetchUsersInfo } from 'actions/index.actions';
import Spinner from 'components/spinner/Spinner.component';
class Loader extends React.Component {
componentDidMount() {
this.props.fetchUsersInfo();
}
render() {
return (
<div>
{this.props.appState.isFetchingUsersInfo ?
<div>
<Spinner />
</div>
:
<div>
{this.props.children}
</div>
}
</div>
);
}
}
Loader.propTypes = {
children: React.PropTypes.node.isRequired,
appState: React.PropTypes.shape({
isFetchingUsersInfo: React.PropTypes.bool.isRequired,
}),
fetchUsersInfo: React.PropTypes.func.isRequired,
};
const mapStateToProps = state => ({
appState: {
isFetchingUsersInfo: state.appState.isFetchingUsersInfo,
},
});
export default connect(mapStateToProps, { fetchUsersInfo })(Loader);
Dashboard.jsx
import React from 'react';
import { connect } from 'react-redux';
import { fetchAllProjects } from 'actions/index.actions';
import styles from './Dashboard.container.scss';
class Dashboard extends React.Component {
componentDidMount() {
this.props.fetchAllProjects();
}
render() {
return (
<div>
Dashboard
</div>
);
}
}
Dashboard.propTypes = {
appState: React.PropTypes.shape({
isFetchingProjects: React.PropTypes.bool.isRequired,
}),
fetchAllProjects: React.PropTypes.func.isRequired,
};
const mapStateToProps = state => ({
appState: {
isFetchingProjects: state.appState.isFetchingProjects,
},
});
export default connect(mapStateToProps, { fetchAllProjects })(Dashboard);