React路由器使用Material UI实现navlink

import { BrowserRouter, NavLink } from 'react-router-dom';
import { makeStyles } from '@material-ui/core/styles';
import { Button } from '@material-ui/core';

function App() {
  return (
    <BrowserRouter>
      {/* 路由组件 */}
    </BrowserRouter>
  );
}

function Navbar() {
  return (
    <nav>
      <NavLink to="/" exact activeClassName="active">Home</NavLink>
      <NavLink to="/about" activeClassName="active">About</NavLink>
      <NavLink to="/contact" activeClassName="active">Contact</NavLink>
    </nav>
  );
}

const useStyles = makeStyles({
  navLink: {
    margin: '0 10px',
    color: 'black',
    textDecoration: 'none',
    '&.active': {
      fontWeight: 'bold',
    },
  },
});

function Navbar() {
  const classes = useStyles();

  return (
    <nav>
      <NavLink to="/" exact className={classes.navLink} activeClassName="active">Home</NavLink>
      <NavLink to="/about" className={classes.navLink} activeClassName="active">About</NavLink>
      <NavLink to="/contact" className={classes.navLink} activeClassName="active">Contact</NavLink>
    </nav>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      {/* 其他页面组件 */}
    </BrowserRouter>
  );
}