web-dev-qa-db-ja.com

React-Routerで呼び出されないonEnter

わかりました、私はしようとしてうんざりしています。
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()}を呼び出すと実行されますが、明らかにそれは目的ではなく、目的のパラメーターも取得できません。

javascriptreactjsreact-routerreact-router-v4
55
Trace

onEnterはreact-router-4に存在しなくなりました。目的の機能を取得するには、<Route render={ ... } />を使用する必要があります。 Redirect の例には具体的なシナリオがあると思います。以下に合わせて変更しました。

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

v2/v3からv4への移行 ：のドキュメントに従って、react-router-v4からonEnter、onUpdate、およびonLeaveが削除されました。

on*プロパティ
React Router v3は、onEnter、onUpdate、およびonLeaveメソッドを提供します。これらは基本的に、Reactのライフサイクルメソッドを再作成していました。

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

26
fangxing