onEnter n'est pas appelé dans React-Router

Question

Ok, j'en ai marre d'essayer.
La méthode onEnter ne fonctionne pas. Une idée pourquoi c'est?

 // 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")
 

Modifier:

La méthode est exécutée lorsque j'appelle onEnter={requireAuth()} , mais ce n'est évidemment pas le but recherché et je ne vais pas non plus obtenir les paramètres souhaités.

Answer 1

onEnter n'existe plus sur react-router-4 . Vous devez utiliser <Route render={ ... } /> pour obtenir les fonctionnalités souhaitées. Je crois que Redirect exemple a votre scénario spécifique. Je l'ai modifié ci-dessous pour correspondre au vôtre.

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

Answer 2

À partir de réagir-routeur-v4 onEnter, onUpdate, et onLeave est supprimé, selon la documentation sur la migration à partir de v2/v3 à v4:

on* propriétés
Réagir Routeur v3 fournit onEnter, onUpdate, et onLeave des méthodes. Il s'agit essentiellement de recréer Réagir du cycle de vie des méthodes.

Avec la v4, vous devez utiliser le cycle de vie des méthodes du composant rendue par un <Route>. Au lieu de onEnter, vous devez utiliser componentDidMount ou componentWillMount. Où vous utiliseriez onUpdate, vous pouvez utiliser componentDidUpdate ou componentWillUpdate (ou peut-être componentWillReceiveProps). onLeave peut être remplacée par componentWillUnmount.