Question

当使用react-router与redux-simple-router（可能会或可能不会导致问题）时，只要我在每个导航项链接上都有require.ensure，链接就不会更改为活动状态，直到我点击链接后点击了页面上的其他位置。

一步一步：

加载页面;一切都很好
点击<Link />，视图会发生变化;但是，该链接尚未更新任何导航项的活动状态
点击身体上某处的页面，活动状态现在正确显示在当前导航项目上，而不是前一个

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

一些示例路线：

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

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

以下是一个例子：

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

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

单击<link />不会失去焦点在react-enore的react.enure

1 个答案: