Я настроил код из компонента Tabs в пользовательском интерфейсе материала,
<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», вынажмите на другую вкладку, вы получите текст «Страница вторая».
Однако я надеялся, что смогу использовать реагирующий маршрутизатор, чтобы я мог вывести компонент на каждую вкладку и назначить маршрут. В реагирующем маршрутизаторе это было бы примерно так (я знаю, что есть что-то, что нужно сделать для реагирующего маршрутизатора, но в коде вкладок это будет так):
<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>
теги.
Есть ли простой способ добавить туда маршрутизатор реагировать?
И если невозможно включить реакциюмаршрутизатор, как я могу по-прежнему отображать свой компонент с помощью пользовательского кода материала?