使用 mui React抽屉链接页面

Question

在我的应用程序中，我需要渲染一个没有抽屉的登录页面，并渲染抽屉内的其余页面。因此，我创建了包含抽屉的 Home.jsx 文件，并将我的路线放入其中。问题是我无法正确渲染页面。

这是我的 App.js 文件。

<ThemeProvider theme={theme}>
            <BrowserRouter>
                <Routes>
                    <Route path="/login" element={<Login />} />
                    <Route path="/" element={<Home />} />
                    <Route path="/users" element={<Home />} />
                </Routes>
            </BrowserRouter>
</ThemeProvider>

这是我的 Home.jsx 文件

      <Drawer>
        <Accordion className="sidebar-accordian">
          <AccordionSummary
            expandIcon={<SouthEastIcon className="arrow-icon" />}
            aria-controls="panel1a-content"
            id="panel1a-header"
          >
            <Typography style={{ display: 'flex', alignItems: 'center' }}>
              <img style={{ marginRight: '10px' }} src={users} />
              <Link to="/users" style={{ textDecoration: 'none', color: 'inherit' }}>
                Users
              </Link>
            </Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
              malesuada lacus ex, sit amet blandit leo lobortis eget.
            </Typography>
          </AccordionDetails>
        </Accordion>
      </Drawer>

      <Box>
        <Toolbar />

        <div className="main-box-component-inner-div">
          <Routes>
            <Route path="/" element={<div>Home Page</div>} />
            <Route path="/users" element={<Users />} />
          </Routes>
        </div>
      </Box>

上面的代码也为我提供了“/users”的 Home.jsx 内容。但如果我从 App.js 中删除

<Route path="/users" element={<Home />} />

，它会给我“/users”路线的空白屏幕。当我在 App.js 中将其编辑为

<Route path="/users" element={<Users/>} />

时，它会呈现 Users.jsx 内容，但没有抽屉。请帮助我在抽屉中显示我的 Users.jsx 文件。

Answer 1

我认为您只需要实现公共和受保护路由概念并使用 RRDv6 的 Outlet 组件即可。这是来自 shirisha95 的 中等帖子的受保护路由的基本指南。