1. ホーム
  2. javascript

[解決済み] React-RouterでonEnterが呼び出されない

2022-02-06 13:48:22

質問

OK、もう限界です。
その 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()} しかし、それは明らかに目的から外れていますし、目的のパラメータを得ることもできません。

どのように解決するのですか?

onEnter にはもう存在しない。 react-router-4 . を使用する必要があります。 <Route render={ ... } /> を使用すると、希望する機能を得ることができます。私は Redirect の例には、あなたの具体的なシナリオが書かれています。以下に、あなたのシナリオに合うように修正しました。

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