El siguiente código es responsable de construir la barra lateral en el sitio. En este caso, la barra lateral tiene 2 opciones de filtro, hechas en forma de lista desplegable.
Esta barra lateral se encuentra en todas las páginas del sitio. Sin embargo, el problema es que al cambiar de página, las opciones de filtro seleccionadas no se guardan. Es decir, si en la primera página el usuario marca algo en los filtros, al pasar a la segunda página no se guardarán los valores en los filtros. Y me gustaría que los parámetros seleccionados para el filtrado se guarden al pasar de una página a otra.
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> ); }Como está diciendo que el componente de la Sidebar debe estar en cada página con la misma funcionalidad, lo colocaría en el componente de la App y luego estará siempre en las páginas sin cambiar sus filtros.
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> ); }para compartir el State entre los React Components , puede iniciar su estado en la main App y luego pasarlo a todos los componentes a través de props .
por ejemplo , su "Componente 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>; };y su "Componente 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>; };entonces su aplicación principal se verá así:
// 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> ); } Esto mantendrá el State al navegar entre los React Components , pero no en la actualización del navegador . Si desea Persist el State en la recarga de la página, puede consultar este artículo