如何使用基于不同react路由器路径显示不同菜单

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Home = () => <div>Home Page</div>;
const About = () => <div>About Page</div>;
const Products = () => <div>Products Page</div>;

const Menu = () => (
  <ul>
    <li><Link to="/">Home</Link></li>
    <li><Link to="/about">About</Link></li>
    <li><Link to="/products">Products</Link></li>
  </ul>
);

const App = () => (
  <Router>
    <div>
      <Menu />
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/products" component={Products} />
    </div>
  </Router>
);

ReactDOM.render(<App />, document.getElementById('root'));