How to do it...

Let's say that your app has three URLs and you want tabs as the navigation mechanism to navigate between the routes. The first step is turning the Tab buttons into links. The second step is having Route components render the appropriate tab content, based on which one was clicked on. Here's the code:

import React, { useState } from 'react';import { Route, Link } from 'react-router-dom';import { withStyles } from '@material-ui/core/styles';import AppBar from '@material-ui/core/AppBar';import Tabs from '@material-ui/core/Tabs';import Tab from '@material-ui/core/Tab';import Typography from '@material-ui/core/Typography';const styles = theme => ({  root: {    flexGrow: 1,    backgroundColor: theme.palette.background.paper  }, tabContent: ...

Get React Material-UI Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.