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の例があなたの特定のシナリオを持っていると信じています。私はあなたのものと一致するように以下を修正しました。反応ルータ-V4 onEnter、onUpdate、及びonLeaveが除去され、 から

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

Answer 2

DOC Migrating from v2/v3 to v4記載：*プロパティ
に

をルータV3はonEnterを提供して反応させ、onUpdate、及びonLeave の方法。これらは本質的にReactのライフサイクルメソッドを再現していました。

v4では、aによってレンダリングされたコンポーネント のライフサイクルメソッドを使用する必要があります。 onEnterの代わりに、 componentDidMountまたはcomponentWillMountを使用します。 onUpdate、 を使用する場合は、componentDidUpdateまたはcomponentWillUpdate（またはおそらく componentWillReceiveProps）を使用できます。 onLeaveは、 componentWillUnmountに置き換えることができます。