Tab navigation with routes

You can base your tab content on routes in a routing solution, such as react-router. To do this, you have to make your tab buttons into links, and you need to have Route components below the Tabs component to render the current URL.

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...