我已经从 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 代码渲染我的组件?
最佳答案
尝试将 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>
对我来说很好用
关于javascript - 是否可以使用 material ui 选项卡并仍然使用 react router?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58811322/