使側邊欄可用于所有組件|反應JS|反應路由器v6

我正在使用 react router dom v6 并希望實作一個邏輯，其中側邊欄將在我的所有組件中可用。目前，每當我嘗試單擊側欄中的任何內容時，側欄都會消失。我想在我的應用程式中的所有組件中保留側邊欄。

側邊欄可用

側邊欄不見了

索引.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';

    import {BrowserRouter as Router,    Routes, Route,Navigate,Link} from
   'react-router-dom'; import Login from
   '../src/components/Login/LoginPage'; import Test from
   '../src/components/test/Test'; import Homepage from
   '../src/components/homepage/HomePage'; import Scheduler from
   '../src/components/scheduler/Scheduler'; import Classroom from
   '../src/components/classroom/Classroom'; import Assignment from
   '../src/components/assignment/Assignment'; import Meeting from
   '../src/components/meetings/Meetings'; import ReportCard from
   '../src/components/reportcard/ReportCard'; import SideMenuBar from
   '../src/components/sidemenubar/SideMenuBar'; ReactDOM.render(

    <Router>
      <Routes>
        <Route path='/' element={<Login />} />
        <Route path='/api/v1/testpath' element={<Test />} />
        {/* Sidebar Routes */}
        <Route path="/api/v1/app/userHome" exact element={<Test />} />
        <Route path="/api/v1/app/schedule" exact element={<Scheduler />} />
        <Route path="/api/v1/app/myclassroom" exact element={<Classroom />} />
        <Route
          path="/api/v1/app/myassignments"
          exact
          element={<Assignment />}
        />
        <Route path="/api/v1/app/mymeetings" exact element={<Meeting />} />
        <Route path="/api/v1/app/viewreports" exact element={<ReportCard />} />
      </Routes>
    </Router>,


  document.getElementById('root')
);

側邊欄.js

import {
  ListItemIcon,
  ListItemText,
  List,
  Divider,
  Drawer,
  Avatar,
  Box,
  ListItemButton,
} from "@mui/material";
import { makeStyles } from "@mui/styles";

import HomeIcon from "@mui/icons-material/Home";
import WatchLaterIcon from "@mui/icons-material/WatchLater";
import GroupsIcon from "@mui/icons-material/Groups";
import AssignmentOutlinedIcon from "@mui/icons-material/AssignmentOutlined";
import AssessmentOutlinedIcon from "@mui/icons-material/AssessmentOutlined";
import LogoutOutlinedIcon from "@mui/icons-material/LogoutOutlined";
import MeetingRoomOutlinedIcon from "@mui/icons-material/MeetingRoomOutlined";

import Logo from "./logo.png";

import { BrowserRouter as Router, Route, Link, Routes } from "react-router-dom";
import Homepage from "../homepage/HomePage";
import Scheduler from "../scheduler/Scheduler";
import Classroom from "../classroom/Classroom";
import Assignment from "../assignment/Assignment";
import ReportCard from "../reportcard/ReportCard";
import Meeting from "../meetings/Meetings";
const drawerWidth = 350;
const useStyles = makeStyles({
  page: {
    background: "#f9f9f9",
    width: "100%",
  },
  root: {
    display: "flex",
  },
  drawer: {
    width: drawerWidth,
  },
  drawerPaper: {
    width: drawerWidth,
    borderRadius: "2%",
  },
  listitem: {
    "&:hover": {
      fontWeight: "fontWeightBold",
      background: "#f9f9f9",
    },
  },
  navlink: {
    textDecoration: "inherit",
    color: "inherit",
  },
});

export default function Sidemenubar() {
  const classes = useStyles();

  return (
    <Box sx={{ display: "flex" }}>
      <Divider />

      <Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{ paper: classes.drawerPaper }}
        anchor="left"
      >
        {/*App Logo */}
        <Avatar
          src={Logo}
          alt="404"
          sx={{ width: 100, height: 100, alignSelf: "center", margin: 1 }}
        />
        {/*Menu Items */}

        <List component="nav">
          <Link to="/api/v1/app/userHome" className={classes.navlink}>
            <ListItemButton
              sx={{
                "&:hover": {
                  fontWeight: "bold",
                  boxShadow: 1,
                  background: "#6D62DA",
                },
              }}
            >
              <ListItemIcon>
                <HomeIcon />
              </ListItemIcon>
              <ListItemText primary="Home" />
            </ListItemButton>
          </Link>
          <Divider />
          <Link to="/api/v1/app/schedule" className={classes.navlink}>
            <ListItemButton
              sx={{
                "&:hover": {
                  fontWeight: "bold",
                  boxShadow: 1,
                  background: "#6D62DA",
                },
              }}
            >
              <ListItemIcon>
                <WatchLaterIcon />
              </ListItemIcon>
              <ListItemText primary="Scheduler" />
            </ListItemButton>
          </Link>
          <Divider />
        </List>
      </Drawer>
      <Routes>
      <Route path='/api/v1/app/userHome' element={<Homepage />}></Route>
        <Route path='/api/v1/app/schedule' element={<Scheduler />}></Route>
      </Routes>
    </Box>
  );
}

主頁.js

import React from 'react';
import { Grid } from "@mui/material";
import SideMenuBar from '../sidemenubar/SideMenuBar';
import HomePage from '../homepage/HomePage';
import Scheduler from '../scheduler/Scheduler';
import {BrowserRouter as Router, 
    Routes, Route,Navigate,Link} from 'react-router-dom';
class Test extends React.Component{
    render(){
        return (
            <Grid container>
                <Grid item md={4}>
                    <SideMenuBar />
                </Grid>
                
                <Grid item md={8}>
                    <HomePage />
                </Grid>
                
            </Grid>
        )
    }
}

export default Test;

uj5u.com熱心網友回復：

如果您想在每個路線/頁面上呈現側邊欄，那么我建議：

使用 Layout Wrapper 組件和 Outlet

創建一個布局容器組件，將Sidebar組件和一個渲染Outlet到各自的網格列中。渲染嵌套在布局中的頁面路由。

import { Outlet } from 'react-router-dom';
import SideMenuBar from '../sidemenubar/SideMenuBar';

const PageLayout = () => (
  <Grid container>
    <Grid item md={4}>
      <SideMenuBar />
    </Grid>    
    <Grid item md={8}>
      <Outlet /> // <-- nested routes rendered here
    </Grid>     
  </Grid>
);

索引.js

<Router>
  <Routes>
    <Route path="/" element={<PageLayout />} >
      <Route index element={<Login />} />
      <Route path="/api/v1/app/userHome" element={<UserHome />} />
      <Route path="/api/v1/app/schedule" element={<Scheduler />} />
      <Route path="/api/v1/app/myclassroom" element={<Classroom />} />
      <Route
        path="/api/v1/app/myassignments"
        element={<Assignment />}
      />
      <Route path="/api/v1/app/mymeetings" element={<Meeting />} />
      <Route path="/api/v1/app/viewreports" element={<ReportCard />} />
    </Route>
  </Routes>
</Router>

使用包裝組件和children道具

另一種方法是讓PageLayout組件渲染它children，并包裝Routes組件。

const PageLayout = ({ children }) => (
  <Grid container>
    <Grid item md={4}>
      <SideMenuBar />
    </Grid>    
    <Grid item md={8}>
      {children}
    </Grid>     
  </Grid>
);

索引.js

<Router>
  <PageLayout>
    <Routes>
      <Route path="/ element={<Login />} />
      <Route path="/api/v1/app/userHome" element={<UserHome />} />
      <Route path="/api/v1/app/schedule" element={<Scheduler />} />
      <Route path="/api/v1/app/myclassroom" element={<Classroom />} />
      <Route
        path="/api/v1/app/myassignments"
        element={<Assignment />}
      />
      <Route path="/api/v1/app/mymeetings" element={<Meeting />} />
      <Route path="/api/v1/app/viewreports" element={<ReportCard />} />
    </Routes>
  </PageLayout>
</Router>

標籤：javascript 反应 反应路由器 反应路由器-dom

上一篇：反應如何在嵌套資料物件中呈現動態影像

下一篇：將串列物件過濾到Angular中的其他串列