Question

https://material-ui.com/components/tabs/

我正在使用react-redux。

我想在Materia ui中使用panelTab切换React页面。

单击选项卡时

<TabPanel value={value} index={0}>
  Item One
</TabPanel>

我应该如何设计？

        <TabPanel value={value} index={0}></TabPanel>
        <Route
            exact
            path="/pageA"
            component={PageAContainer}
          ></Route>
        <TabPanel value={value} index={1}>
          aaa
          {props.moveToPageB()}
          {/*<Route exact path="/pageB" component={PageBContainer}></Route> */}
        </TabPanel>

Answer 1

您可以使用React Router dom软件包中的Link。因此，您可以在标签中添加以下代码

<TabPanel value={value} index={0}>
  <Link to="/pageA">Page A</Link>
</TabPanel>

Answer 2

创建主布局，例如：

<header> your tabs </header>   
//pass your routes here 
 <Switch>
  <Route></Route>  
  <Route></Route>  
<Switch/>

标题包含多个标签，并且标签具有指向特定路由的链接，例如

   <TabPanel value={value} index={0}>
    <Link to="YOUR_ROUTE_NAME">
     Item One
    </Link>
   </TabPanel>

因此，我们可以访问标题中的链接，并且布局会根据我们的标签页点击

进行更改

我想使用tab来切换项目中的页面。项目使用react-redux和react -router

2 个答案: