如何做一个React-导航路线？(选项卡)

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

const Tab1 = () => <div>内容1</div>;
const Tab2 = () => <div>内容2</div>;
const Tab3 = () => <div>内容3</div>;

const NavigationTabs = () => {
  const location = useLocation();
  const history = useHistory();

  const handleTabClick = (path) => {
    history.push(path);
  };

  return (
    <div>
      <ul>
        <li onClick={() => handleTabClick('/tab1')} className={location.pathname === '/tab1' ? 'active' : ''}>
          <Link to="/tab1">选项卡1</Link>
        </li>
        <li onClick={() => handleTabClick('/tab2')} className={location.pathname === '/tab2' ? 'active' : ''}>
          <Link to="/tab2">选项卡2</Link>
        </li>
        <li onClick={() => handleTabClick('/tab3')} className={location.pathname === '/tab3' ? 'active' : ''}>
          <Link to="/tab3">选项卡3</Link>
        </li>
      </ul>

      <Switch>
        <Route path="/tab1" component={Tab1} />
        <Route path="/tab2" component={Tab2} />
        <Route path="/tab3" component={Tab3} />
      </Switch>
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <NavigationTabs />
    </Router>
  );
};

export default App;