Question

获得了自定义代码

  <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 Router中，可能会是这样（我知道React Router还有很多工作要做，但是在选项卡代码中就可以了）：

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

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

但是在第一段代码中，我向您展示了（我是从材料ui定制的），其中包含了<TabPanel>标签。

有没有简单的方法可以将反应路由器扔在那里？

如果不可能包含react router，我如何仍可以使用该用户界面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>

对我来说很好

Answer 2

对于正在研究此问题的任何人，如果您遇到与Kislay Kunal相同的问题，请尝试以下链接：Material-UI's Tabs integration with react router 4?

要点是，除非您将浏览器状态与实质性UI选项卡状态相关联，否则这些选项卡将更改url路径，但是指定该路径不会将您导航至正确的选项卡。因此，基本上以Mickael Muller的示例为例，将value替换为this.props.history.location.path

<AppBar position="static">
 <Tabs
  variant="fullWidth"
  value={this.props.history.location.path}
  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={this.props.history.location.path} index={0}>
 Page Onee
</TabPanel>
<TabPanel value={this.props.history.location.path} index={1}>
 Page Two
</TabPanel>

是否可以使用材料ui选项卡并仍使用react router？

2 个答案: