Intercept back navigation with React Router 4?

Question

I have a Checkout page which after a form submission takes you to an Order page. If the user clicks the browser back button on the Order page, then instead of taking them back to the Checkout page I need to redirect them to their Account page. How can I do this with React Router 4?

I found this question but it seems out of date: Intercept/handle browser's back button in React-router?

I can think of 2 approaches:

1 In Checkout on componentDidMount see if the previous URL was /order. If it is then perform a redirect.

2 In the Order component intercept the back navigation command and instead redirect.

I would prefer option 2 as the behaviour is residing in the component which it will be called from, and the Checkout component does not need to be mounted. However I'm not sure if browsers allow you to edit these things?

score 0 · Accepted Answer · answered May 20 '19 at 17:10

0

You'll need to manipulate the react-router history. You can either use the history library or the Redirect component. This post explains it well: https://tylermcginnis.com/react-router-programmatically-navigate/

answered May 20 '19 at 17:10

pitchdiesel

319
1
12

Yes this is what I mean by option 1. – Evanss May 21 '19 at 06:34
Cool! If you're trying to go with option #2, you could use `history.push`, which is also outlined in that article. – pitchdiesel May 21 '19 at 13:33

Intercept back navigation with React Router 4?

1 Answers1