How do I access the last path in the current component? (React router V6)

Question

I would like to render the UI differently depending on where we arrive at the current page. For example, an item detail page should have an extra 'delete' button if we come from '/mycollection' versus '/apiSearchResults'. How do I achieve this in react router v6?

I know I can create an Higher order component that encapsulates the reused component and the extra feature. But I am wondering if I can do without an HOC.

Thanks!

*How* is a user getting from `"/mycollection"` to `"/apiSearchResults"` in your code? Please include a [minimal, complete, and reproducible code example](https://stackoverflow.com/help/minimal-reproducible-example) so we've context for what the code is trying to do. Does this help answer your question? https://stackoverflow.com/questions/59701050/how-to-pass-data-from-a-page-to-another-page-using-react-router/59701168#59701168 — Drew Reese, Jun 21 '22 at 15:27

score 1 · Answer 1 · answered Jun 21 '22 at 15:12

You can pass down state using the <Link> component, in this case a pathname:

<Link to={{pathname: '/nextpath', state: { prevPath: location.pathname }}}>Example Link</Link>

You can then access prevPath from this.props.location.state in the next component

How do I access the last path in the current component? (React router V6)

1 Answers1