javascript-在React-Rou中未调用onEnter

好吧,我受够了尝试。
onEnter={requireAuth()}方法不起作用。 知道为什么吗?

// 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()}时,将执行该方法,但显然这不是目的,而且我也不会获得所需的参数。

2个解决方案
100 votes

react-router-4react-router-4上不再存在。您应该使用<Route render={ ... } />获得所需的功能。 我相信Redirect示例具有您的特定情况。 我在下面对其进行了修改,使其与您的匹配。

<Route exact path="/home" render={() => (
  isLoggedIn() ? (
    <Redirect to="/front"/>
  ) : (
    <Home />
  )
)}/>
Deividas Karzinauskas answered 2019-11-08T02:28:39Z
27 votes

从react-router-v4 <Route>onEntercomponentDidMount中删除,根据有关从v2 / v3迁移到v4的文档:

<Route>属性
React Router v3提供<Route>onEntercomponentDidMount   方法。 这些本质上是在重新创建React的生命周期方法。

对于v4,您应该使用组件的生命周期方法   由<Route>呈现。您可以使用onEnter代替   componentDidMountcomponentWillMount。在使用onUpdate的位置,   您可以使用componentDidUpdatecomponentWillUpdate(或可能   componentWillReceiveProps)。 onLeave可以替换为   componentWillUnmount

fangxing answered 2019-11-08T02:29:27Z
translate from https://stackoverflow.com:/questions/42768620/onenter-not-called-in-react-router