在Material UI App Bar选项卡中使用React Router

Question

我正在尝试使用现有的Material UI App Bar组件实现React Router的最新版本，但遇到实现问题。如何在导航栏中的<Router>的{​​{1}}中使用Route.js的{​​{1}}组件，以便将选项卡用作路由链接？

Navbar.js

<AppHeader/>

Route.js

import React from "react";
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { AppHeader } from 'app-header';
import { Tab, Tabs } from 'tabs';

const NavBar = (props) => {
  return (
  <div className={props.classes.headerContainer}>
    <AppHeader
      data-testid="app-header-default-example"
      position="static"
      className={props.classes.root}
      renderNav={({ getNavProps }) => (
        <div {...getNavProps({})}>
          <Tabs
            centered
            displayName={'defaultExample'}
            noBorder
            renderTab={({ getTabProps, index }) => {
              const testid = `tab-${index}`;
              return <Tab {...getTabProps()} data-testid={testid} />;
            }}
            tabs={["Page-1", "Page-2", "Page-3"]}
          />
          <p className={props.classes.headerAppTitle}>{props.appTitle}</p>
        </div>
      )}
    /></div>
)};

export default NavBar;