Erro Rota com React

Estou recebendo o erro abaixo:

	Error: Invariant failed: You should not use <Link> outside a <Router>

	 

	 

 import React, { Component } from "react";

 import { Link } from 'react-router-dom';

	 

 export default class Product extends Component {

 render() {

 return (

 <>

 <h1>Product</h1>

 <ul>

 <li><Link to='/'>Home</Link></li>

 </ul>

 </>

 );

  

 }

 }

  

  

 import React from 'react';

 import { BrowserRouter, Switch, Route } from 'react-router-dom';

  

 import Main from './pages/main';

 import Product from "./pages/product";

  

 const Routes = () => (

 <BrowserRouter>

 <Switch>

 <Route exact path="/" component={Main} />

 <Route path="/products" component={Product} />

 </Switch>

 </BrowserRouter>

 );

  

 export default Routes;

  

  

  

  

 import Routes from "./routes";

  

 // import api from './services/api';

  

 import './styles.css';

 import Main from './pages/main';

 import Header from './components/Header';

  

 function App() {

 return (

 <div className="App">

 <Header />

 <Main />

 <Routes />

 </div>

 );

 }

  

 export default App;