javascript - 是否可以使用 material ui 选项卡并仍然使用 react router？

Question

我已经从 Tabs component in material ui, 定制了代码

  <AppBar position="static">
    <Tabs
      variant="fullWidth"
      value={value}
      onChange={handleChange}
      aria-label="nav tabs example"
    >
      <LinkTab label="Page One" href="/drafts" {...a11yProps(0)} />
      <LinkTab label="Page Two" href="/trash" {...a11yProps(1)} />

    </Tabs>
  </AppBar>
  <TabPanel value={value} index={0}>
    Page Onee
  </TabPanel>
  <TabPanel value={value} index={1}>
    Page Two
  </TabPanel>

它基本上是两个选项卡，你点击一个，它会显示文本“Page Onee”，你点击另一个选项卡，你会看到文本“Page Two”。

但是，我希望能够使用 React Router，这样我就可以为每个选项卡添加一个组件并分配路由。在 react 路由器中它会是这样的(我知道 react 路由器还有更多的事情要做，但在标签代码中就是这样):

<Link class="nav-link" to="/component1">Click here to see component1</Link>

<Link class="nav-link" to="/component2">Click here to see component2</Link>

但是在我给你看的第一段代码中(我从 Material ui 定制的代码)我有那些 <TabPanel>标签。

是否有一种简单的方法可以将 React 路由器放入其中？

如果无法包含 React 路由器，我如何仍然能够使用该 Material ui 代码渲染我的组件？

Answer 1

尝试将 material-ui 的 Tab 组件与 to 属性和 component={Link} 属性一起使用。不要忘记 import { Link } from 'react-router-dom';

<AppBar position="static">
 <Tabs
  variant="fullWidth"
  value={value}
  onChange={handleChange}
  aria-label="nav tabs example"
 >
   <Tab component={Link} label="Page One" to="/drafts" {...a11yProps(0)} />
   <Tab component={Link} label="Page Two" to="/trash" {...a11yProps(1)} />

 </Tabs>
</AppBar>
<TabPanel value={value} index={0}>
 Page Onee
</TabPanel>
<TabPanel value={value} index={1}>
 Page Two
</TabPanel>

对我来说很好用