更改MUI Drawer内容的正确方法

Question

我对 React 完全陌生，我正在尝试了解使用 React + MUI + Drawer 进行主体内容简单转换的最佳方法是什么。

以下代码完成错误并总结，仅供举例建议：

return (
    <Box sx={{ display: 'flex' }}>
      <Drawer>
        <DrawerHeader>
          <IconButton onClick={handleDrawerClose}>
            {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
          </IconButton>
        </DrawerHeader>
        <Divider />
        <List>
          {['Users', 'Messages'].map((text, index) => (
            <ListItem key={text} disablePadding>
              <ListItemButton>
                <ListItemIcon>
                  {index % 2 === 0 ? <PersonIcon /> : <MailIcon />}
                </ListItemIcon>
                <ListItemText primary={text} />
              </ListItemButton>
            </ListItem>
          ))}
        </List>
      </Drawer>
      <Main open={open}>
        <DrawerHeader />
        
        <Users /> <!-- ********* HERE ********* -->

      </Main>
    </Box>
  );

假设我有一个包含用户和消息项目的菜单，并且我还有

<Users />

和

<Messages />

组件。当用户单击消息菜单项时，我想将

<Users />

更改为

<Messages />

。

我最初使用可见性 true 或 false 来实现该转换，显然该实现不需要更改路由。因此，当仪表板加载并显示路线保留的内容时

/dashboard

。

但我不确定这是最好的方法。

• 最好的方法是什么？路线？
• 涉及到的性能问题呢？
• 将来我想在同一个地方显示一个用户表单，我会使用相同的方法吗？

Answer 1

如果您使用的是react-router-dom，这基本上是通过使用

<Outlet />

组件来完成的。

这是一个简单的例子：

// # AppRouter.jsx
import { BrowserRouter, Routes, Route} from 'react-router-dom'
import HomePage from '@/pages/HomePage'
import UsersPage from '@/pages/UsersPage'
import MessagesPage from '@/pages/MessagesPage'

<BrowserRouter>
  <Routes>
    <Route element={<DashboardLayout />}>
      <Route index element={<HomePage />}/>
      <Route path="/users" element={<UsersPage />}/>
      <Route path="/messages" element={<MessagesPage />}/>
    </Route>
  </Routes>
</BrowserRouter>

// # DashboardLayout.jsx
import { Outlet, matchPath, useLocation } from 'react-router-dom'

const { pathname } = useLocation()
const amISelected = (path) => matchPath(pathname, path)

<Stack direction="row">
  <Drawer>
    <List>
      <ListItem>
        <ListItemButton selected={amISelected("/")} component={Link} to="/">
           <ListItemText>Home</ListItemText>
        </ListItemButton>
      </ListItem>
      <ListItem>
        <ListItemButton selected={amISelected("/users")} component={Link} to="/users">
           <ListItemText>Users</ListItemText>
        </ListItemButton>
      </ListItem>
      <ListItem>
        <ListItemButton selected={amISelected("/messages")} component={Link} to="/messages">
           <ListItemText>Messages</ListItemText>
        </ListItemButton>
      </ListItem>
     </List>
  </Drawer>
  <Main>
    <DrawerHeader /> {/* to allocate the top margin of the topbar */}
    <Outlet /> {/* 👈 HERE */}
  </Main>
</Stack>