How it works...

The state portion of your component remains the same as any other component that uses the Tabs component. The onChange event changes the value state, which is passed to Tabs as a property to mark the selected tab.

Let's take a closer look at the Tab components:

<Tabs value={value} onChange={onChange}>
  <Tab label="Item One" component={Link} to="/" />
  <Tab label="Item Two" component={Link} to="/page2" />
  <Tab label="Item Three" component={Link} to="/page3" />
</Tabs>

A major difference with this implementation compared to something more standard is that you're using Link as the component property value. The Link component, from react-router-dom, is used to make the tab button into a link that the router will process. The to property is actually passed to Link, which is how it knows where the link should take the user.

Below the Tabs component are the routes that render the tab content, based on the tab that the user has clicked on. Let's take a look at one of these Routes:

<Route
  exact
  path="/"
  render={() => (
    <Typography
      component="div"
      className={classes.tabContent}
    >
      Item One
    </Typography>
  )}
/>

The content that is rendered below the tab is based on the current URL, not the value state of your component. The value state is only used to control the state of the selected tab.