How can I keep the state from resetting after I refresh the page with React Router?

1

I´m trying to build a react NavBar that has a switch button that changes the theme of the page. The theme is a bootstrap theme that is passed in a element to a helmet component, all within the navbar for now.

This switch button changes the state, and then a function, according to the state returns one of two elements with different hrefs (bootstrap themes) that then it gets rendered in the helmet element.

The problem is, when I change between pages with Router, the state resets and so does the theme. Can you think of a solution? How do I keep the state even after changing pages?

2

Usually a theme option is a good fit for a persistent “global” state management system.
You can use any flux-like system if you have them in place already or use React.Context.

A simple structure would be:

<App>
 <Theme.Provider>
   <Route.Provider> {... rest}
  </Route.Provider>
 </ThemeProvider>
</App>

This way you can pass your theme props directly where you need them. :+1:

3

I already have that structure, the App renders NavBar, which renders, besides the navbar itself, the Router and the Helmet