react-router: how to get the previous route in onEnter handler?

Question

I'm trying to find a way to read the previous route/path when a user hits a new one, within the onEnter handler.

I have a React Router structured like so:

    <Router history={history}>
      <div className="index">
        <Route
          path="/"
          component={ComposedAppComponent}
          onEnter={this.onEnterHandler.bind(this)}
        >
          <Route name="streamKey" path=":streamKey">
            <Route name="articleUri" path="(**)" />
          </Route>
        </Route>
      </div>
    </Router>

the function, onEnterHandler, looks like so:

  onEnterHandler(nextRouteState) {
    const { streamKey, splat } = nextRouteState.params;

    const nextPath = `/${streamKey}/${splat}`;
    const prevPath = // HOW DO I GET THE PREVIOUS PATH?
  }

I can't seem to find a way to read the previous route path the user was on... I need to make a comparison between the new route and previous one. Any input on how to approach this is much appreciated. :)

Cheers!

Fourflush

pretty sure the second argument is the last state. – Tarahtaran

github.com/reactjs/react-router/blob/master/docs/… yup – Tarahtaran

Oh my mistake, but the function right underneath onChange seems to be exactly what you're looking for – Tarahtaran

@Tarahtaran thanks for the tip, but I don't think that will work. I need this to fire when a user enters a route. – Fourflush

oh... what about just this ? I just tried and I get the previous (current) path! – Tarahtaran

in case if you use react-router-redux: https://mcmap.net/q/181129/-detect-previous-path-in-react-router – Orthogenic

Answer 1

Are you trying to get the previous path when the user navigate to new path through address bar or using react-router like this.context.router.push()?

If the navigation is using react-router, maybe these simple way would get what you're looking for:

1. Pass prevPath using query-params

Navigation might look like this:

`<Link to="/next" query={{ prevPath: this.props.location.pathname }}> Your Next path</Link>`

Now, you can get your prevPath value on onEnterHandler method by using this: nextState.location.query.prevPath

• Cons: the query will appear on address bar.
• Pros: you are still able to get your prevPath when user is navigating through address bar (direct path access).

2. Pass prevPath using state

Navigation might look like this:

`<Link to="/next" state={{ prevPath: this.props.location.pathname }}> Your Next path</Link>`

Now, you can get your prevPath value on onEnterHandler method by using this: nextState.location.state.prevPath

• Cons: the query won't appear on address bar.
• Pros: you are not able to get your prevPath when user is navigating through address bar (direct path access).

In addition, the cons of those method is you should assign a prevPath value into each of Link components. Create a wrapper component for the Link component would solve this issue.

Indelicacy

How would a wrapper around the Link component look like? I'm a beginner to React, so I apologize if that is somewhat of a novice question. @Indelicacy – Dowd

@JayS. you would create a HOC (higher order component) - lets call it <MyLink />. Inside it you'd have a normal <Link /> however you'd pass it the query/state prop. Then anytime you use <MyLink /> instead of <Link /> you don't need to specify the query/state, since the wrapper you created will pass it in for you automatically. – Swinish