如何修复路线渲染

Question

随着我的路线，侧边栏和顶部栏正在使用注册和登录页面呈现。

我想在侧边栏不应呈现的地方使用单独的路由呈现注册和登录页面。侧边栏和顶部栏应该只与主页和其他组件一起呈现。请给我一个解决方案来解决这个问题。 我已经将 react-router-dom 用于路由器和主题的 meterial ui 组件。 这是代码：

import { Route, Routes } from "react-router-dom";
import { useState } from "react";
import Home from "./pages/Home";
import Page1 from "./pages/page1";
import LogIn from './pages/LogIn'
import SignUp  from './pages/SignUp'
import Sidebar from "./scenes/global/Sidebar"
import Topbar from "./scenes/global/Topbar"
import { CssBaseline, ThemeProvider } from "@mui/material";
import { ColorModeContext, useMode } from "./theme";
function App() {
  const [theme, colorMode] = useMode();
  const [isSidebar, setIsSidebar] = useState(true);

  return (
    <ColorModeContext.Provider value={colorMode}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
      <div className="app">
        <Routes>
          <Route path="/" element={<SignUp/>}/>
          <Route path="/login" element={<LogIn/>}/>
        </Routes>
        <Sidebar isSidebar={isSidebar}/>
        <main className="content">
          <Topbar setIsSidebar={setIsSidebar}/>
            <Routes>
            <Route path="/home" element={<Home/>}/>
            <Route path="/page1" element={<Page1/>}/>
            </Routes> 
        </main>
      </div>
      </ThemeProvider>
    </ColorModeContext.Provider>
    
  )
}

export default App

Answer 1

您可以在每个页面组件中呈现侧边栏和顶部栏。 这不仅可以解决您的问题，还可以让您更轻松地管理项目页面。

例如在 Home.jsx 中

return (
    <>
        <TopBar />
        <PageContent />
        <SideBar />
    </>
)

Answer 2

使用 react router v6 你可以使用 Outlet

像这样更改您的App.js：

function App() {
  return (
    <ColorModeContext.Provider value={colorMode}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <div className="app">
          <Routes>
            <Route element={<Sidebar  />}>
              <main className="content">
                <Route element={<Topbar  />}>
                  <Route path="/home" element={<Home />} />
                  <Route path="/page1" element={<Page1 />} />
                </Route>
              </main>
            </Route>
            <Route path="/login" element={<LogIn />} />
            <Route path="/signup" element={<SignUp />} />
          </Routes>
        </div>
      </ThemeProvider>
    </ColorModeContext.Provider>
  );
}

在TopBar.js中：

import React from 'react'
import { Outlet } from 'react-router-dom';

    function Topbar() {
       //your code ......
      return (
        <div>
          {Your code goes here } 
          <Outlet/>
        </div>
      )
    }
     
    export default Topbar

在Sidebar.js中：

import React from 'react'
import { Outlet } from 'react-router-dom';

function Sidebar() {
   // Your code ......
  return (
    <div>
      {Your code goes here}
      <Outlet/>
    </div>
  )
}

export default Sidebar

Answer 3

您可以使用布局：

1. App.jsx

   <Routes>
        <Route path="/auth" element={<AuthLayout />}>
        //GuestLayout child routes
        </Route>
   
        <Route path="/home" element={<MainLayout />}>
        //MainLayout child routes 
        </Route>
   </Routes>
   

2. MainLayout.jsx

   <div>
      <Sidebar />
      <TopBar />
      //Render the child routes            
      <Outlet />
   </div>