React-router.布局问题，看不到其他路由

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

const Layout = ({ children }) => {
  return (
    <div>
      {/* 这里可以放置共享的布局元素，如导航栏、页眉等 */}
      <header>Header</header>
      <nav>
        <ul>
          <li><a href="/home">Home</a></li>
          <li><a href="/about">About</a></li>
          {/* 其他路由链接 */}
        </ul>
      </nav>
      
      {/* 这里是路由组件的渲染位置 */}
      {children}
      
      {/* 这里可以放置共享的布局元素，如页脚、版权信息等 */}
      <footer>Footer</footer>
    </div>
  );
};

const Home = () => {
  return <h1>Welcome to Home Page</h1>;
};

const About = () => {
  return <h1>About Us</h1>;
};

const App = () => {
  return (
    <BrowserRouter>
      <Layout>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        {/* 其他路由配置 */}
      </Layout>
    </BrowserRouter>
  );
};

export default App;