React Router OnEnter 钩子调用了两次答案

【问题标题】：React Router OnEnter hook called twiceReact Router OnEnter 钩子调用了两次
【发布时间】：2017-04-30 17:43:26
【问题描述】：

我有一个非常简单的案例。我想根据客户是否登录将加载我的索引页面的客户重定向到 /dashboard 或 /login。问题是，onEnter 处理程序每次都被调用两次，我想知道为什么。这是我的代码：

ReactDOM.render(
<div>
    <Provider store={ store }>
    <Router history={ history }>
        <Route path="/" component={ App }>
            <IndexRoute onEnter={ requireAuth }/>
            <Route path="/login" component={ Login } />
            <Route path="/dashboard" component={ Dashboard } />
        </Route>
    </Router>
    </Provider>
</div>,
document.getElementById('root'));

还有一个替代版本。问题是双向的。

ReactDOM.render(
<div>
    <Provider store={ store }>
    <Router history={ history }>
        <Route path="/" component={ App }>
            <IndexRedirect to="/counter" />
            <Route path="/login" component={ Login } />
            <Route path="/counter" component={ Counter } onEnter={ requireAuth } />
        </Route>
    </Router>
    </Provider>
</div>,
document.getElementById('root'));

【问题讨论】：

我不确定它是否能解决您的问题，但可能会尝试将每个组件包装在 HOC 中，以检查用户是否经过身份验证并显示正确的组件或重定向到另一个...但是如果您想使用onEnter 我会尝试调查它。
把onEnter方法放到App组件上。

标签： reactjs react-router react-router-redux

【解决方案1】：

我找到了原因。这是 react-router-redux v4.0.7 中的一个错误。记录了一个问题here。在合并修复之前，降级到 v4.0.6 会修复它。

【讨论】：

【解决方案2】：

尝试像这样重构您的路线

<Provider store={ store }>
    <Router history={ history }>
        <Route path="/" component={ App }>
            <IndexRedirect to="counter" />
            <Route path="login" component={ Login } />
            <Route path="counter" component={ Counter } onEnter={ requireAuth } />
        </Route>
    </Router>
 </Provider>

我认为路由 /counter 再次调用您的 App 组件，然后再次请求 onEnter。

【讨论】：