onEnter not called in React-Router
JavascriptReactjsReact RouterReact Router-V4Javascript Problem Overview
Ok, I'm fed up trying.
The onEnter
method doesn't work. Any idea why is that?
// 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:
The method is executed when I call onEnter={requireAuth()}
, but obviously that is not the purpose, and I also won't get the desired parameters.
Javascript Solutions
Solution 1 - Javascript
onEnter
no longer exists on react-router-4
. You should use <Route render={ ... } />
to get your desired functionality. I believe Redirect
example has your specific scenario. I modified it below to match yours.
<Route exact path="/home" render={() => (
isLoggedIn() ? (
<Redirect to="/front"/>
) : (
<Home />
)
)}/>
Solution 2 - Javascript
From react-router-v4 onEnter
, onUpdate
, and onLeave
is removed,
according the documentation on migrating from v2/v3 to v4:
> on*
properties
React Router v3 provides onEnter
, onUpdate
, and onLeave
> methods. These were essentially recreating React's lifecycle methods.
>
> With v4, you should use the lifecycle methods of the component
> rendered by a <Route>
. Instead of onEnter
, you would use
> componentDidMount
or componentWillMount
. Where you would use onUpdate
,
> you can use componentDidUpdate
or componentWillUpdate
(or possibly
> componentWillReceiveProps
). onLeave
can be replaced with
> componentWillUnmount
.