React router v6使用javaScript对象和material-ui选项卡

Question

最近，我开始开发一个react应用程序，我有一个任务需要创建一些标签。当单击任何选项卡时，我必须加载所选选项卡应显示的页面。我还必须根据选择的选项卡更改url (我的区域不在客户端技术周围，所以我只是卡住了)

布局应该是这样的

​

​

我要做的是，在选择Menu2项目时，我必须显示选项卡，在选择选项卡时，我应该加载其内容。

url格式应该是这样的(本地主机:80/menu2- item /tab1/ {item1}，其中{item1}可以是从内容中选择的项。

在应用程序中，我看到useRoutes钩子使用了类似这样的东西。

const routes = [
  {
    path: '',
    element: <DashboardLayout />,
    children: [
      { path: '/', element: <AccountView /> },
      { path: 'account', element: <AccountView /> },
      { path: 'control-center', element: <ControlCenterLayout /> },
      { path: '*', element: <Navigate to="/404" /> }
    ]
  }
];


const App = () => {
  const routing = useRoutes(routes);

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyles />
      {routing}
    </ThemeProvider>
  );
};

DashboardLayout中有一个Outlet元素，据我所知，它用于显示子路由，我猜这是在routes对象中指定的“子路由”。我要做的是ControlCenterLayout部分。

我已经更新了routes对象中的ControlCenterLayout部分，以及它看起来像这样

 {
    path: 'control-center',
    element: <ControlCenterLayout />,
    children: [
      { path: 'item1', element: <Item1View/> },
      { path: 'item2', element: <Item2View/> },
    ]
  },

创建了一个TopBar元素

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Paper, Tabs, Tab} from '@material-ui/core';

const useStyles = makeStyles({
  root: {
    flexGrow: 1,
  },
});

const TopBar = ({ className, ...rest }) => {
  const classes = useStyles();
  const [tab, setTab] = React.useState(0);

  const handleChange = (event, newTab) => {
    setTab(newTab);
  };

  return (
    <Paper square className={classes.root}>
      <Tabs value={tab} onChange={handleChange} >
        <Tab label="Item1View"  />
        <Tab label="Item2View" />
      </Tabs>    
    </Paper>
  );
};

引用TopBar的index.js

const ControlCenterLayout = () => {
    const classes = useStyles();

    return (
      <div className={classes.root}>
        <TopBar />
        <div className={classes.wrapper}>
          <div className={classes.contentContainer}>
            <div className={classes.content}>
              <Outlet />
            </div>
          </div>
        </div>
      </div>
    );
}

但我不知道如何使用工艺路线和物料-ui标签来获得结果，也不知道我是否在正确的轨道上。

Answer 1

基本上，您需要在BrowserRouter中添加AppBar

      <BrowserRouter>
        <AppBar position="static">
          <Tabs
            variant="fullWidth"
            value={value}
            onChange={handleChange}
            aria-label="nav tabs example"
          >
            <LinkTab label="Main" pathname="/" {...a11yProps(0)} />
            <LinkTab label="Users" pathname="/users" {...a11yProps(0)} />
            <LinkTab label="Me" pathname="/users/me" {...a11yProps(1)} />
          </Tabs>
        </AppBar>
        <Routes>
          <Route path="/" element={<Main />} />
          <Route path="users" element={<Users />}>
            <Route path="/" element={<UsersIndex />} />
            <Route path="me" element={<OwnUserProfile />} />
          </Route>
          <Route path="*" element={<Other />} />
        </Routes>
      </BrowserRouter>

另外，配置Material UI选项卡组件，使其行为类似于链接组件与component={Link}属性链接。

​

​

检查附加的工作沙箱Url。https://codesandbox.io/s/muitabs-v6routing-5odvz?file=/src/index.js

修正了左侧抽屉导航的问题。我希望这能帮到你