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