javascript - link - redirect react js

onEnter no llamado en React-Router

Question

Ok, estoy harto de intentarlo.
El método onEnter no funciona. ¿Alguna idea de por qué es eso?

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

Editar:

El método se ejecuta cuando onEnter={requireAuth()} , pero obviamente ese no es el propósito, y tampoco obtendré los parámetros deseados.

Answer 1

De react-router-v4 onEnter , onUpdate y onLeave se eliminan, de acuerdo con la documentación sobre la migración de v2 / v3 a v4 :

on* propiedades
React Router v3 proporciona los onEnter , onUpdate y onLeave . Estos esencialmente estaban recreando los métodos del ciclo de vida de React.

Con v4, debe utilizar los métodos de ciclo de vida del componente representado por un <Route> . En lugar de onEnter , usaría componentDidMount o componentWillMount . Donde usaría onUpdate , puede usar componentDidUpdate o componentWillUpdate (o posiblemente componentWillReceiveProps ). onLeave se puede reemplazar con componentWillUnmount .

Answer 2

onEnter ya no existe en react-router-4 . Debe usar <Route render={ ... } /> para obtener la funcionalidad deseada. Creo que el ejemplo de Redirect tiene su escenario específico. Lo modifiqué a continuación para que coincida con el tuyo.

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