reactjs 如何修复路线渲染[重复]

k97glaaz 于 2023-03-01 发布在 React

关注(0)|答案(3)|浏览(179)

- 此问题在此处已有答案**：

How do I render components with different layouts/elements using react-router-dom v6（2个答案）
2天前关闭。
作为我的路线Sidebar和顶栏是渲染与Signup和登录页面。
我想用一个单独的路径来呈现Signup和登录页面，在那里侧边栏不应该呈现。侧边栏和Topbar应该只用home和other组件呈现。
我已经使用react-router-dom作为路线和主题的材质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

reactjs

来源：https://stackoverflow.com/questions/75574082/how-to-fix-the-routes-rendering

3条答案

按热度按时间

xmq68pz91#

你可以在每个页面组件中呈现侧边栏和顶栏。2这不仅可以解决你的问题，而且可以使你更容易地管理项目页面。

例如在Home.jsx中

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

赞(0）回复(0）举报 2023-03-01

yqlxgs2m2#

使用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

在边栏.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

赞(0）回复(0）举报 2023-03-01

vyswwuz23#

- 您可以使用布局：**

App.jsx

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

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

MainLayout.jsx

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

赞(0）回复(0）举报 2023-03-01

我来回答

reactjs 如何修复路线渲染[重复]

3条答案

相关问题

热门标签

最新问答