I have customized code from the Tabs ponent 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 ponent 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="/ponent1">Click here to see ponent1</Link>

<Link class="nav-link" to="/ponent2">Click here to see ponent2</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 ponent with that material ui code?

I have customized code from the Tabs ponent 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 ponent 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="/ponent1">Click here to see ponent1</Link>

<Link class="nav-link" to="/ponent2">Click here to see ponent2</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 ponent with that material ui code?

• javascript
• reactjs
• react-router
• material-ui
• jsx

2 Answers 2

Try to use the Tab ponent of material-ui with the to props and ponent={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 ponent={Link} label="Page One" to="/drafts" {...a11yProps(0)} />
   <Tab ponent={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

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 ponent={Link} label="Page One" to="/drafts" {...a11yProps(0)} />
   <Tab ponent={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>