onEnter pas appelé à Réagir-Routeur

Ok, j'en ai marre d'essayer.

Le onEnter méthode ne fonctionne pas. Une idée de pourquoi? 

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

Edit:

La méthode est exécutée lorsque j'appelle onEnter={requireAuth()}, mais ce n'est évidemment pas le but, et j'ai aussi de ne pas obtenir les paramètres désirés.

  • Qui réagissent-routeur version utilisez-vous?
InformationsquelleAutor Trace | 2017-03-13
  1. 97

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

    <Route exact path="/home" render={() => (
  isLoggedIn() ? (
    <Redirect to="/front"/>
  ) : (
    <Home />
  )
)}/>
    • Bien que, j'ai remarqué aujourd'hui que ce n'est pas réellement rendu de la composante de la nouvelle url vers laquelle est redirigé. Est-ce comportement souhaité? Ne semble pas très logique...
    • non, ce n'est pas le comportement par défaut. Si vous utilisez Switch composant puis Redirect doit être rendu comme prévu. Toutefois, si vous n'êtes pas à l'aide de Switch, Redirect ne sera pas rendu (que je suppose a été votre cas d'utilisation).
    • Karžinauskas je vois il y a un petit problème ici , que si l'utilisateur <Redirection="/front"/> ? avant le contenu doit se charger après authencated droit ?
    • Ce qui se passe si isLoggedIn est Asynchrone en fonction?
    • Comment cela fonctionne, si vous utilisez Redux? comment avez-vous accès isLoggedIn, si c'est dans votre état de l'arbre?
    • Une façon est d'importer votre stocker et d'accéder à la getState() méthode qui renvoie l'état actuel du magasin: import store from '../store/store.index'; // or wherever your initialized store is exported const { getState } = store; const isLoggedIn = getState().app.isLoggedIn; // Adjust according to your state tree
    • fonctionne, mais maintenant, la Maison n'aura pas de "l'histoire" dans ses accessoires. Je ne comprends pas pourquoi. Normalement, il aurait, si l'Itinéraire a été défini avec une composante "={Home}" plutôt que d'un rendu.
    • dans le cas d'un Promisified isLoggedIn render={ () => { isLoggedIn().then( res => { return res ? ( <Redirect to="/front"/> ) : ( <Home /> )}) }}
    • Je vous remercie.

    InformationsquelleAutor Deividas Karzinauskas
  2. 26

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

    on* propriétés

    Réagir Routeur v3 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 pouvez utiliser
    componentDidMount ou componentWillMount. Lorsque vous utilisez onUpdate,
    vous pouvez utiliser componentDidUpdate ou componentWillUpdate (ou peut-être
    componentWillReceiveProps). onLeave peut être remplacé par
    componentWillUnmount.

    InformationsquelleAutor fangxing