在 React-Router 中未调用 onEnter

Question

好吧，我受够了尝试。
onEnter 方法不起作用。知道为什么吗？

// Authentication "before" filter
function requireAuth(nextState, replace){
  console.log("called"); // => Is not triggered at all 
  if (!isLoggedIn()) {
    replace({
      pathname: '/front'
    })
  }
}

// Render the app
render(
  <Provider store={store}>
      <Router history={history}>
        <App>
          <Switch>
            <Route path="/front" component={Front} />
            <Route path="/home" component={Home} onEnter={requireAuth} />
            <Route exact path="/" component={Home} onEnter={requireAuth} />
            <Route path="*" component={NoMatch} />
          </Switch>
        </App>
      </Router>
  </Provider>,
  document.getElementById("lf-app")

编辑：

当我调用onEnter={requireAuth()}时该方法被执行，但显然这不是目的，我也不会得到想要的参数。

Answer 1

onEnter 不再存在于react-router-4。您应该使用<Route render={ ... } /> 来获得您想要的功能。我相信Redirect 例子有你的具体情况。我在下面修改了它以匹配你的。

<Route exact path="/home" render={() => (
  isLoggedIn() ? (
    <Redirect to="/front"/>
  ) : (
    <Home />
  )
)}/>

Answer 2

从 react-router-v4 中删除 onEnter、onUpdate 和 onLeave， 根据migrating from v2/v3 to v4上的文档：

on* 属性
React Router v3 提供 onEnter、onUpdate 和 onLeave 方法。这些本质上是在重新创建 React 的生命周期方法。

在 v4 中，您应该使用组件的生命周期方法 由<Route> 渲染。而不是onEnter，你会使用 componentDidMount 或 componentWillMount。你会在哪里使用onUpdate， 你可以使用componentDidUpdate 或componentWillUpdate（或者可能 componentWillReceiveProps)。 onLeave 可以替换为 componentWillUnmount.