0

I have customized code from the 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>

It's basically two tabs, you click on one and it shows the text "Page Onee", you click on the other tab, you get the text "Page Two".

However , I was hoping to be able to use react router so that I can bring a component to each tab and assign the route. In react router it would be something like this ( I know there's more stuff to do for react router, but in the tabs code this would be it):

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

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

But in the first piece of code I showed you(the one I customized from material ui) I have those <TabPanel> tags.

Is there an easy way to throw react router in there?

And if it's not possible to include react router, how can I still be able to render my component with that material ui code?

chris56tv
  • 107
  • 2
  • 6

2 Answers2

5

Try to use the Tab component of material-ui with the to props and component={Link} props. Don't forget the 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>

It works fine for me

Mickael Muller
  • 150
  • 7
  • Hey I'm using the same method but the problem is, say I Enter localhost/trash It doesn't directly takes me there as normal link. Is there a way to force this behaviour. – Kislay Kunal Dec 10 '19 at 22:27
  • @KislayKunal Wrap your Tab Panels in a with children, each with a path that mirrors your tab routes. – Learner Mar 30 '21 at 08:46
1

To anyone viewing this question down the road, if you're running into the same issue as Kislay Kunal try this link instead: Material-UI's Tabs integration with react router 4?

The gist is that unless you tie the browser state into your material UI tab state the tabs will change the url path, but specifying the path won't navigate you to the correct tab. So basically just take Mickael Muller's example and replace value with this.props.history.location.path like this 

<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>
Ben Watson
  • 21
  • 1