So, I have a list of some data displayed in a table. Now when I click on a particular row, I update the url and redirect it to "dataDetails/:dataId" page, where using useParams I fetch and display the details. Now the problem is on the page where I am displaying the list, I store the list of selected rows which when I view the data details on click is reset.
Previously, when I was not using react-router-dom, I would use useState hook and conditionally render the dataDetails component or the list component.
I want to be able to persist the state of selected rows when routing to other page.
Is there any way I can update the URl too using react-router-dom when I render the dataDetails component too and conditionally render it as I previously did?
2
Answers
You should use Context (or Redux) to save data on a level higher than the page so it persists on navegation.
First, you should create a Provider component which handles the data (saves it on its State and has a method to change it).
Then, wrap around the pages (or the whole app) with this Provider component.
https://react.dev/reference/react/useContext
A way of accomplishing this is to store the selected rows globally using state management technologies such as Redux or React Context. After creating a context, you should use the context provider to wrap your components.