Reactjs 如何通过浏览器路由在单独的.jsx文件中使用MUI抽屉

我准备了a simple test case at Github个问题:

在我的App.jsx中有以下代码:

<NavDrawer />

<BrowserRouter>
  <Routes>
    <Route path="page1" element={<Page1 />} />
    <Route path="page2" element={<Page2 />} />
    <Route path="page3" element={<Page3 />} />
    <Route path="*" element={<Page4 />} />
  </Routes>
</BrowserRouter>

在NavDrawer.jsx米中，我有这样的代码:

const drawerLinks = [
  { text: "Page 1", path: "/page1", icon: <CarCrash /> },
  { text: "Page 2", path: "/page2", icon: <Help /> },
  { text: "Page 3", path: "/page3", icon: <Directions /> },
  { text: "Page 4", path: "/page4", icon: <CarRepair /> },
];

function MyListItem({ text, path, icon }) {
  return (
    <ListItem disablePadding>
      <ListItemButton>
        <ListItemIcon>{icon}</ListItemIcon>
        <Link to={path}>
          <ListItemText primary={text} />
        </Link>
      </ListItemButton>
    </ListItem>
  );
}

export default function NavDrawer() {
  return (
    <Drawer>
      <BrowserRouter>
        <nav>
          <List>
            {drawerLinks.map((item, index) => (
              <MyListItem key={index} icon={item.icon} text={item.text} />
            ))}
          </List>
        </nav>
      </BrowserRouter>
    </Drawer>
  );
}

不幸的是，当我点击Drawer中的Link时，什么也没有发生，显示的页面保持Page4，并且控制台中没有打印任何消息或错误.