主页 / coding / 问题 / 77976553
Accepted
Alexander Farber
Asked: 2024-02-11 19:12:27 +0800 CST

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

  • 772

我在 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>
  );
}

不幸的是，当我单击Link中的其中一个 s时Drawer，没有任何反应，显示的页面保持不变，Page4并且控制台中没有打印任何消息或错误。

reactjs

2 个回答

  1. Best Answer

    该NavDrawer组件正在渲染自己的组件，与渲染的BrowserRouter组件完全分开。点击的链接由 的路由器处理，而另一个主路由器完全不知道任何已生效和处理的导航操作。BrowserRouterAppNavDrawerNavDrawer

    每个应用程序只需要一台路由器，通常位于应用程序的根级别或附近。

    BrowserRouter从根组件中删除NavDrawer并嵌套NavDrawer在根组件下BrowserRouter，以便单个路由器处理所有导航操作。

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

    <BrowserRouter>
  <NavDrawer /> // <-- rendered within routing context
  <Routes>
    <Route path="page1" element={<Page1 />} />
    <Route path="page2" element={<Page2 />} />
    <Route path="page3" element={<Page3 />} />
    <Route path="*" element={<Page4 />} />
  </Routes>
</BrowserRouter>
    • 1

  2. 我在 Reddit 上收到了 ulvesked 的友好回答-

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

    另外，我错过了将path参数传递Link给Drawer.

    现在应用程序按预期运行：

    截屏

    • 0

相关问题