我从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 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代码来呈现我的组件?