Show progress bar BEFORE go to route

I'm developing a universal react application using redux. I use react-router v3. I want to show a progress bar "BEFORE" going to next route (next route is fetching data from API).

for example imagine I am in "Home Page" and I want go to "Submit Page". when I click on the Submit Link (react-router Link) first show a progress bar in "Home Page" and wait for Submit page data fetching and then go to "Submit Page". My React Routes:

<Route component={App}>
        <Route path={HomingRoutes.HomePage} component={HomePage}/>
        <Route path={HomingRoutes.SubmitPage} component={SubmitPage}/>
        <Route path={HomingRoutes.SearchPage} component={SearchPage}/>
        <Route path={`${HomingRoutes.DealsPage}`} component={DealsPage}/>
        <Route path={`${HomingRoutes.DealPage}/:id(/:title)`} component={DealPage}/>
        <Route path={`${HomingRoutes.Detail}/:id(/:title)`} component={DetailPage}/>
        <Route path="*" component={NoMatch}/>
    </Route>

in Home Page :

<Link to "/Submit" >Submit</Link>

My Submit page Container code is :

class SubmitContainer extends React.Component {
    static readyOnActions(dispatch) {
        return Promise.all([
            dispatch(SubmitActions.fetchSubmitInitialData()),
        ]);
    }
    componentDidMount() {
        this.props.fetchSubmitInitialData();
    }
}

"fetchSubmitInitialData" is an action creator that fetch data from API.