Search code examples
reactjsreact-reduxbrowser-history

React w/ Redux - Best way to find matching path in history

I have a React/Redux project that consists of a navigation, lists of items and a details pane (showing one single item).

enter image description here

The "Pop hits 2" album can be opened by navigating to path "/list/all" or "/list/pop" and then selecting the "Pop hits 2" row. When the "Pop hits 2" opens the path changes to "/album/1234567890". For correct rendering of the UI I need to know where I opened the "Pop hits 2" from ("/list/all" or "/list/pop") when closing the details pane. The album can also be opened from a shared link. I do not wish to use history.go(-1) - this will not work when pasting a shared link.

I need to be able to find the actual path in the history that matches the last opened list.

Is there a recommended way to achieve this in React?

Kind regards /K

Solution

  • I turns out the best way to see where the application has been been is to simply use the state property in the React Router Link.

    This article on how to pass state from Link to components really helped explain how to use the Link state.

    Basically the Link can pass the state property to the rendered component.

    <Link to={{ pathname: "/courses", state: { fromDashboard: true } }} />

    The rendered component then access the state via props.location.state

    This in conjunction with passing props to components generating the links solved my problem! (^__^)