reactjs - 单击 <Link> 不会在带有 require.ensure 的 React-router 中失去焦点

Question

当将react-router与redux-simple-router一起使用时(可能会也可能不会导致问题)，只要我在每个导航项链接上都有一个require.ensure，链接就不会更改为事件状态，直到我单击链接后还单击了页面上的其他位置。

一步一步:

1. 加载页面；一切都很好
2. 点击<Link />并且 View 发生变化；不过，该链接尚未更新任何导航项的事件状态
3. 单击页面上的某个位置(例如正文)，事件状态现在正确地位于当前导航项上，而不是前一个导航项上

在使用 require.ensure 之前不会发生这种情况并且在我的生产服务器上没有发生 0.bundle.js和bundle.js 。它目前只发生在我的本地环境中，其中每个链接都会创建一个新的 *.bundle.js每个 View 的文件。

一些示例路线:

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'
        ]
    ]

还有我的路由器:

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

在我的导航中，我有这个:

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

Answer 1

在 connect 中使用 pure: false – 否则来自路由器的上下文更新将被忽略。

这是一个例子:

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

pure: false 还需要添加到直接引用导航组件的组件中。