How to store a page session with react-router, Browser History?

Question

I am creating a simple toDo app where I have 3 links to navigate to. I am trying to store the current page data regardless of whichever page I navigate to without losing the current page data if I end up going back. For example, I have 3 checkbox items in the tasks tab. If I navigate to Reminder tab and go back to tasks tab later, I want the same 3 checkboxes and data to still be there. But the problem is the page data gets deleted when I navigate back to the current page. I am using react-router to do this and others have mentioned to use Browser History API, but I am unsure how to approach this? Do I have to track the changes in the current tab whenever data changes with Browser History and pass the location.state as props in react-router, Route?

Answer 1

You have multiple options to do this and they are:

• You can save data to the local storage and then display it later
• You can use ContextAPI
• You can use Redux to store data and re-use it later

As you are developing to-do app and if you want to use React functionality instead of Local storage then go for ContextAPI because it's simple to-do app and redux is not needed for this.