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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.