Clicking <Link> doesn't lose focus in react-router with require.ensure

Question

When using react-router with redux-simple-router (may or may not cause the issue), so long as I have a require.ensure on every nav item link, the links do not change to the active state until I've clicked somewhere else on the page after clicking the link.

Step by step:

1. Load the page; everything's fine
2. Click a <Link /> and the view changes; although, the link has not updated the active state on any nav items
3. Click on the page somewhere like on the body and the active state is now correctly on the current nav item and off the previous one

This did not happen before using require.ensure and wasn't happening on my production server where it has 0.bundle.js and bundle.js. It only currently happens in my local environment where each link creates a new *.bundle.js file for each view.

Some example routes:

module.exports =
    component: 'div'
    childRoutes: [
        path: '/'
        onEnter: (nextState, replaceState) =>
            if nextState.location.pathname == '/'
                replaceState null, '/game'
        component: Master
        childRoutes: [
            path: 'game'
            getComponent: (location, cb) =>
                require.ensure [], (require) =>
                    cb null, require './views/game'
        ,
            path: 'video-policy'
            getComponent: (location, cb) =>
                require.ensure [], (require) =>
                    cb null, require './views/video-policy'
        ,
            path: '*'
            getComponent: (location, cb) =>
                require.ensure [], (require) =>
                    cb null, require './views/404'
        ]
    ]

And my router:

render() { return (
    <Provider store={store}>
        <Router history={history} routes={routes} />
    </Provider>
)}

In my navigation, I have this:

export default connect(
    state => ({ state: state })
)(HeaderNav);

Answer 1

Use pure: false in connect – otherwise the context updates from the router will be ignored.

Here's an example:

export default connect(
    state => ({ state: state }),
    null, null,
    { pure: false }
)(HeaderNav);

pure: false also needs to be added to components that directly reference your nav component.