如何在独立.jsx文件中结合BrowserRouter使用MUI Drawer？

核心问题 #

1. 重复路由上下文冲突：你在App.jsx和NavDrawer.jsx中各声明了一个<BrowserRouter>，React Router要求整个应用只能有一个顶层Router实例，多个Router会创建独立的路由上下文，导致NavDrawer里的<Link>无法和App里的<Routes>联动。
2. 缺失props传递：渲染MyListItem时没有传递path属性，使得组件内<Link>的to值为undefined，无法触发正确跳转。
3. 路径匹配不统一：App里的路由路径是page1，而Link的路径是/page1，虽然React Router兼容相对路径，但统一格式能避免潜在匹配问题。

修复步骤 #

1. 调整App.jsx结构，统一路由上下文 #

将<NavDrawer>移到<BrowserRouter>内部，确保所有路由相关组件共享同一个上下文：

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

2. 移除NavDrawer.jsx中的冗余Router并补全props #

删除NavDrawer里多余的<BrowserRouter>，同时补上MyListItem所需的path属性：

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>
      <nav>
        <List>
          {drawerLinks.map((item, index) => (
            <MyListItem 
              key={index} 
              icon={item.icon} 
              text={item.text} 
              path={item.path}
            />
          ))}
        </List>
      </nav>
    </Drawer>
  );
}

验证修复 #

修改完成后，点击Drawer中的链接即可正常跳转到对应页面，不会再停留在Page4。

内容的提问来源于stack exchange，提问作者Alexander Farber