onEnter未在React-Router中调用

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

根据有关从v2/v3迁移到v4的文档,来自react-router-v4 onEnter,onUpdate并将onLeave其删除:

on*性能
阵营路由器v3提供onEnter,onUpdate和onLeave 方法.这些本质上是重建React的生命周期方法.

使用v4,您应该使用由a呈现的组件的生命周期方法<Route>.而不是onEnter,你会使用 componentDidMount或componentWillMount.当你会用onUpdate,你可以使用componentDidUpdate或componentWillUpdate(或可能 componentWillReceiveProps).onLeave可以替换为 componentWillUnmount.