<div className="App">
<Router>
<Switch>
<Route exact path="/">
<AppBar position="static">
<Tabs
variant="fullWidth"
value={value}
onChange={handleChange}
aria-label="nav tabs example"
>
<LinkTab label="Overview" href="/drafts" {...a11yProps(0)} />
<LinkTab label="Stocks" href="/trash" {...a11yProps(1)} />
<LinkTab label="Data" href="/spam" {...a11yProps(2)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
<OverviewContainer />
</TabPanel>
<TabPanel value={value} index={1}>
<StocksContainer />
</TabPanel>
<TabPanel value={value} index={2}>
<AnalyticsContainer />
</TabPanel>
</Route>
</Switch>
</Router>
</div>
这是根应用程序的代码。这就是我的应用looks like
如果我在股票选项卡上刷新,它将恢复到概览选项卡。我尝试为每个选项卡设置单独的路由/网址,但对我来说并没有真正起作用。有什么建议吗?
答案 0 :(得分:0)
想通了。我最终创建了一个将当前选项卡存储到 localStorage 的组件
import React, {useEffect} from 'react';
const useStickyState = (defaultValue, key) => {
const [value, setValue] = React.useState(() => {
const stickyValue = window.localStorage.getItem(key);
return stickyValue !== null
? JSON.parse(stickyValue)
: defaultValue;
});
useEffect(() => {
window.localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue];
}
export {useStickyState}