onEnter not called in React-Router

JavascriptReactjsReact RouterReact Router-V4

Javascript 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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionhtml_programmerView Question on Stackoverflow
Solution 1 - JavascriptDeividas KarzinauskasView Answer on Stackoverflow
Solution 2 - JavascriptfangxingView Answer on Stackoverflow