我需要有不同的按钮在我的标题基于路线

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

// 假设有三个页面：首页、关于我们、联系我们
const Home = () => <button>首页按钮</button>;
const About = () => <button>关于我们按钮</button>;
const Contact = () => <button>联系我们按钮</button>;

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">首页</Link>
            </li>
            <li>
              <Link to="/about">关于我们</Link>
            </li>
            <li>
              <Link to="/contact">联系我们</Link>
            </li>
          </ul>
        </nav>

        {/* 根据路由渲染不同的组件 */}
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;