Question

我有一个相当简单的案例。我想将客户加载我的索引页面重定向到/ 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'));

Answer 1

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

Answer 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。

React Router OnEnter挂钩调用了两次

2 个答案: