score:6

Accepted answer

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

score:2

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>

Related Query

More Query from same tag