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.
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 />
)
)}/>
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 providesonEnter,onUpdate, andonLeavemethods. These were essentially recreating React's lifecycle methods.With v4, you should use the lifecycle methods of the component rendered by a
<Route>. Instead ofonEnter, you would usecomponentDidMountorcomponentWillMount. Where you would useonUpdate, you can usecomponentDidUpdateorcomponentWillUpdate(or possiblycomponentWillReceiveProps).onLeavecan be replaced withcomponentWillUnmount.