react-router url change but had to double click "Link" component for ui to change

Question

When loading for the first time the content is displayed correctly, clicking a link will change the URL but the view still the same. I had to click twice for the view to change.

My router

render(
<Provider store={store}>
    <Router history={browserHistory}>
        <Route path="/:courseName/**" component={components.app}>
            <IndexRoute components={{
                sidebar: containers.sidebar,
                chapter: containers.chapter
            }} />
        </Route>
    </Router>
</Provider>,
document.getElementById('container')
);

My dispatch inside the chapter component

componentWillUpdate() {
    const { dispatch, params: { courseName, splat } }  = this.props;
    dispatch(actions.fetchChapter(courseName, splat));

Answer 1

As @dlopez pointed out, I had to use the incoming props.

componentWillReceiveProps(nextProps) {
    console.log("In erhe");
    const { dispatch, params: { courseName, splat } }  = nextProps;
    dispatch(actions.fetchChapter(courseName, splat));
}