Keep selected filters when navigating between pages

Question

The code below is responsible for building the sidebar on the site. In this case, the sidebar is 2 filter options, made in the form of a drop-down list.

This side bar is located on all pages of the site. However, the problem is that when switching between pages, the selected filter options are not saved. That is, if on the first page, the user checks something in the filters, then when going to the second page, the values ​​in the filters will not be saved. And I would like the selected parameters for filtering to be saved when moving from page to page.

    export default function App() {
  return (
      <ThemeProvider theme={theme} style="width: 100vw; height: 100vh">
          <Header/>
          <BrowserRouter>
              <Routes>
                  <Route exact path='/test' element={<Test filterKey='device'/>}/>
                  <Route exact path='/devices' element={<DeviceList/>}/>
                  <Route exact path='/devices/:deviceId' element={<DeviceId/>}/>
                  <Route exact path='/devices/:deviceId/:userId' element={<UserId/>}/>
                  <Route exact path='/devices/:deviceId/:userId/:sessionId' element={<SessionId/>}/>
                  <Route exact path='/devices/:deviceId/:userId/:sessionId/:pocketId' element={<PocketId/>}/>
                  <Route path="*" element={<Navigate to="/devices" replace />}/>
              </Routes>
              <Footer/>
          </BrowserRouter>
      </ThemeProvider>
  );
}

Answer 1

Since you are saying Sidebar component should be in each page with same functionality, I would place it in App component then it will be always in pages without changing it's filters

export default function App() {
  return (
      <ThemeProvider theme={theme} style="width: 100vw, height: 100vh">
      <BrowserRouter>

          <Header/>

          <div style={{width: '100%', display: 'flex'}}>

           <Routes>
             <Route exact path='/test' element={<Test filterKey='device'/>}/>
             <Route exact path='/devices' element={<DeviceList/>}/>
             <Route exact path='/devices/:deviceId' element={<DeviceId/>}/>
             <Route exact path='/devices/:deviceId/:userId' element={<UserId/>}/>
             <Route exact path='/devices/:deviceId/:userId/:sessionId' element={<SessionId/>}/>
            <Route exact path='/devices/:deviceId/:userId/:sessionId/:pocketId' element={<PocketId/>}/>
            <Route path="*" element={<Navigate to="/devices" replace />}/>
           </Routes>

           <Sidebar />

          </div>

          <Footer/>

         </BrowserRouter> 
      </ThemeProvider>
  );
}

Answer 2

to share the State between React Components you can initiate your state in the main App and then pass it to all components via props .

for example , your "Component A" :

// pass the state & setState in the component as props :
export const ComponentA = ({
  isFilterMethodExpanded,
  setIsFilterMethodExpanded,
  isFilterDateTimeExpanded,
  setIsFilterDateTimeExpanded
}) => {
  // whatever you want to do with the state
  return <div>...</div>;
};

and your "Component B" :

// pass the state & setState in the component as props :
export const ComponentB = ({
  isFilterMethodExpanded,
  setIsFilterMethodExpanded,
  isFilterDateTimeExpanded,
  setIsFilterDateTimeExpanded
}) => {
  // whatever you want to do with the state
  return <div>...</div>;
};

then your main App will look like :

// Initiate the state in the main App :
export default function App() {
  const [isFilterMethodExpanded, setIsFilterMethodExpanded] = useState(false);
  const [isFilterDateTimeExpanded, setIsFilterDateTimeExpanded] = useState(
    false
  );
  // pass the state & setState in the component props in the return part :
  return (
    <div className="App">
      <ComponentA
        isFilterMethodExpanded={isFilterMethodExpanded}
        setIsFilterMethodExpanded={setIsFilterMethodExpanded}
        isFilterDateTimeExpanded={isFilterDateTimeExpanded}
        setIsFilterDateTimeExpanded={setIsFilterDateTimeExpanded}
      />
      <ComponentB
        isFilterMethodExpanded={isFilterMethodExpanded}
        setIsFilterMethodExpanded={setIsFilterMethodExpanded}
        isFilterDateTimeExpanded={isFilterDateTimeExpanded}
        setIsFilterDateTimeExpanded={setIsFilterDateTimeExpanded}
      />
    </div>
  );
}

This will keep the State when navigating between React Components , but not on the browser refresh , If you want to Persist the State on page reload then you can check this article