Início / coding / Perguntas / 77976553
Accepted
Alexander Farber
Asked: 2024-02-11 19:12:27 +0800 CST

Como usar o MUI Drawer em um arquivo .jsx separado com o BrowserRouter?

  • 772

Preparei um caso de teste simples no Github para minha pergunta:

captura de tela

No meu App.jsx existe o seguinte código:

<NavDrawer />

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

E no NavDrawer.jsx tenho o código:

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

Infelizmente, nada acontece quando clico em um dos Links do Drawer, a página exibida permanece igual Page4e não há mensagens ou erros impressos no console.

reactjs

2 respostas

  1. Best Answer

    O NavDrawercomponente está renderizando seu próprio BrowserRoutercomponente completamente separado daquele BrowserRouterque é Apprenderizado. Os links clicados NavDrawersão manipulados pelo NavDrawerroteador do e o outro roteador principal desconhece completamente quaisquer ações de navegação que foram efetuadas e manipuladas.

    Você precisa apenas de um roteador por aplicativo, geralmente no nível raiz do aplicativo ou próximo a ele.

    Remova BrowserRoutere NavDraweraninhe NavDrawersob o componente raiz BrowserRouterpara que um único roteador lide com todas as ações de navegação.

    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. Recebi uma resposta amigável de ulvesked no Reddit -

    Eu tenho que usar não dois, mas um único BrowserRouterno arquivo App.jsx superior.

    Além disso, senti falta de passar o pathargumento para Links no arquivo Drawer.

    Agora o aplicativo funciona conforme esperado:

    captura de tela

    • 0

relate perguntas