如何通过 BrowserRouter 在单独的 .jsx 文件中使用 MUI Drawer？

Question

我在 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 myLinks = [
  { 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>
            {myLinks.map((item, index) => (
              <MyListItem key={index} icon={item.icon} text={item.text} />
            ))}
          </List>
        </nav>
      </BrowserRouter>
    </Drawer>
  );
}

不幸的是，当我单击

Link

中的

Drawer

之一时，没有任何反应，显示的页面保持

Page4

，并且控制台中没有打印任何消息或错误。

Answer 1

我在 Reddit 上收到了 ulvesked 的友好答复 -

我必须在顶部 App.jsx 文件中使用不是两个，而是一个

BrowserRouter

。

此外，我错过了将

path

参数传递给

Link

中的

Drawer

。

现在应用程序按预期工作：