在页面之间导航时保持选定的过滤器

Question

下面的代码负责在站点上构建侧边栏。在本例中，侧边栏是2个过滤器选项，以下拉列表的形式呈现。

这个侧边栏位于网站的所有页面上。然而，问题是当在页面之间切换时，所选择的过滤器选项不会被保存。也就是说，如果用户在第一页检查过滤器中的内容，那么当转到第二页时，将不会保存过滤器中的值。并且我希望在从一个页面移动到另一个页面时保存过滤所选择的参数。

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

既然你说Sidebar组件应该在每个页面中具有相同的功能，我将把它放在App组件中，那么它将始终在页面中而不改变它的过滤器

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

要在React Components之间共享State，您可以在main App中启动您的状态，然后通过props将其传递给所有组件。

为例,你的"组件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>;
};

和你的"组件">:

// 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>;
};

那么你的主应用看起来像:

// 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>
);
}

这将在React Components之间导航时保持State，但不在浏览器刷新，如果你想在页面重新加载Persist的State，那么你可以检查这篇文章