web-dev-qa-db-fra.com

onEnter n'est pas appelé dans React-Router

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.

javascriptreactjsreact-routerreact-router-v4
56
Trace

onEnter n'existe plus sur react-router-4. Vous devez utiliser <Route render={ ... } /> pour obtenir les fonctionnalités souhaitées. Je crois 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 />
  )
)}/>
100
Deividas Karzinauskas

De react-router-v4 onEnter, onUpdate et onLeave est supprimé, conformément à la documentation sur migration de v2/v3 vers v4 :

on* propriétés
React Router v3 fournit les méthodes onEnter, onUpdate et onLeave. Celles-ci étaient essentiellement en train de recréer les méthodes du cycle de vie de React.

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

27
fangxing