reactjs 使用Material UI选项卡和React Router，设置所选选项卡？

6l7fqoea 于 2023-05-06 发布在 React

关注(0)|答案(1)|浏览(158)

使用React，Material-UI和React-Router，我正在尝试将React-Router与Material-UI选项卡结合使用。事实上，我有这一切的工作，但有一个警告。如果用户使用路由加载特定页面，Tabs不会显示所选的正确选项卡。一旦用户进入应用程序，这一切都能正常工作;他们可以点击标签，应用程序正确地完成所有三件事（加载正确的页面，显示选择的正确标签，显示正确的URL和路径），但如果他们直接在浏览器中键入路径，则选择第一个标签。
应用程序：

function App() {
  const [page, setPage] = useState("1");
  const handleChange = (e: React.SyntheticEvent, newPage: string) => {
    setPage(newPage);
  };

  return (
    <Router>
      <div className="App">
        <Header title="My Site" />
        <TabContext value={page}>
          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
            <Tabs
              aria-label="Tab navigation"
              onChange={handleChange}
              value={page}
              variant="fullWidth"
            >
              <Tab label="Tab One" component={Link} to="/pageOne" value="1" />
              <Tab label="Tab Two" component={Link} to="/pageTwo" value="2" />
              <Tab label="Tab Three" component={Link} to="/pageThree" value="3" />
              <Tab label="Tab Four" component={Link} to="/pageFour" value="4" />
            </Tabs>
          </Box>
        </TabContext>
        <Footer />

        <Routes>
          <Route
            path="/"
            element={<pageOne />}
          />
          <Route
            path="/pageOne"
            element={<pageOne />}
          />
          <Route path="/pageTwo" element={<pageTwo />} />
          <Route path="/pageThree" element={<pageThree />} />
          <Route path="/pageFour" element={<pageFour />} />
        </Routes>
      </div>
    </Router>
  );
}

这一切都按照预期工作，因为初始page状态默认为"1"。状态变量page是我刚刚使用制表符时的保留值，而不是react-router;我不确定我是否需要摆脱它。
我一直在试图弄清楚如何根据输入的路径确定该值，但是解析window.location.href字符串并将默认值设置为{[conditional goes here]}不起作用：我从React得到一个错误，告诉我像pageString === "pageTwo"这样的条件总是返回false，因为JS比较的是引用而不是值。
目前使用react@18.2.0、mui@5.12.3和react-router-dom@6.11.0。

reactjs

来源：https://stackoverflow.com/questions/76166189/using-material-ui-tabs-with-react-router-set-the-selected-tab

1条答案

按热度按时间

yx2lnoni1#

您可以使用URL路径作为选项卡应处于活动/选定状态的真实来源。换句话说，当你可以让react-router-dom管理“状态”时，***不要***复制“选项卡状态”。当App组件呈现时，出于任何原因，活动/选定的选项卡将 * 自动 * 同步到当前路由路径值。
使用useLocation钩子访问当前的pathname值，并将其作为Tabs组件的value prop值传递，并更新所有Tab组件，以使用路径值而不是字符串值"1"到"4"。Router需要在ReactTree中提升到更高的位置，以便App可以使用useLocation钩子。
示例：

export default function App() {
  const { pathname } = useLocation();

  return (
    <div className="App">
      <Header title="My Site" />
      <TabContext value={pathname}>
        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
          <Tabs
            aria-label="Tab navigation"
            value={pathname}
            variant="fullWidth"
          >
            <Tab label="Tab One" component={Link} to="/pageOne" value="/pageOne" />
            <Tab label="Tab Two" component={Link} to="/pageTwo" value="/pageTwo" />
            <Tab label="Tab Three" component={Link} to="/pageThree" value="/pageThree" />
            <Tab label="Tab Four" component={Link} to="/pageFour" value="/pageFour" />
          </Tabs>
        </Box>
      </TabContext>
      <Footer />

      <Routes>
        <Route index element={<Navigate to="/pageOne" />} />
        <Route path="/pageOne" element={<PageOne />} />
        <Route path="/pageTwo" element={<PageTwo />} />
        <Route path="/pageThree" element={<PageThree />} />
        <Route path="/pageFour" element={<PageFour />} />
      </Routes>
    </div>
  );
}

import { BrowserRouter as Router } from "react-router-dom";

...

<Router>
  <App />
</Router>

Demo

赞(0）回复(0）举报 2023-05-06

我来回答

reactjs 使用Material UI选项卡和React Router，设置所选选项卡？

1条答案

Demo

相关问题

热门标签

最新问答