如何使用带有 MUI 选项卡的反应路由器

Question

您能否解释一下我如何使我的路线与 MUI 选项卡一起使用？ 由于我不会像这样编写代码并且不经常使用 MUI，因此我不明白如何使其工作。请问有什么想法吗？

• 我删除了导入以专注于主要问题并使代码更短。

这是我的 NavBar.js 组件：

  const NavBar = props => {
  const [value, setValue] = useState(0);

  const handleChange = (_e, newValue) => {
    setValue(newValue);
  };

  return (
    <AppBar position="static" color="transparent" style={{ position: "fixed", top: 0 }}>
      <Tabs
        value={value}
        onChange={handleChange}
        aria-label="Navigation"
        indicatorColor="primary"
        textColor="primary"
      >
        <Tab label="Home" index={0} />
        <Tab label="Favorites" index={1} />
      </Tabs>
    </AppBar>
  );
};

还有我的 AppRouter.js 组件

const AppRouter = () => {
  return (
    <ThemeProvider>
      <Router>
        <NavBar />
        <Switch>
          <Route exact path="/" component={Home} />
        </Switch>
      </Router>
    </ThemeProvider>
  );
};

Answer 1

好的，我找到了解决方案。 在我的 AppRouter.js 中，我得到了这个：

import React from "react";
import { HashRouter as Router, Switch, Route } from "react-router-dom";
import { Home, Favorites } from "pages";
import { ThemeProvider } from "theme";
import NavBar from "components/NavBar";

const AppRouter = () => {
  return (
    <ThemeProvider>
      <Router>
        <NavBar />
        <Switch>
          <Route exact path="/favorites" component={Favorites} />
          <Route exact path="/" component={Home} />
        </Switch>
      </Router>
    </ThemeProvider>
  );
};

export default AppRouter;

我在我的 NavBar.js 中添加了这个，它允许我在它们之间切换：

import React, { useState } from "react";
import { AppBar, Tabs, Tab } from "@material-ui/core";
import { Home, Favorites } from "pages";
import { Route, BrowserRouter, Switch, Link } from "react-router-dom";

const NavBar = props => {
  const [value, setValue] = useState(0);

  const handleChange = (_e, newValue) => {
    setValue(newValue);
  };


  return (
    <AppBar position="static" color="transparent" style={{ position: "fixed", top: 0 }}>
      <Tabs
        value={value}
        onChange={handleChange}
        aria-label="Navigation"
        indicatorColor="primary"
        textColor="primary"
      >
        <Tab label="Home" index={0} component={Link} to={"/"} />
        <Tab label="Favorites" index={1} component={Link} to={"/favorites"} />
      </Tabs>
    </AppBar>
  );
};

export default NavBar;

我现在面临的问题是由于某种原因我丢失了本地存储并且我改变了我的路线

Answer 2

您是否尝试添加handleChange 硬编码路由，例如基于值的history.push？不确定是不是你想要的。