Question

<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

如果我在股票选项卡上刷新，它将恢复到概览选项卡。我尝试为每个选项卡设置单独的路由/网址，但对我来说并没有真正起作用。有什么建议吗？

Answer 1

想通了。我最终创建了一个将当前选项卡存储到 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}

在 React 上刷新后保持在同一个 TabPanel 上

1 个答案: