#javascript #reactjs #react-router #react-router-dom
Вопрос:
Я использую react router dom v6 и хочу реализовать логику, при которой боковая панель будет доступна для всех компонентов в моем. В настоящее время всякий раз, когда я пытаюсь нажать на любую боковую панель, боковая панель исчезает. Я хочу сохранить боковую панель во всех компонентах моего приложения.
Боковая панель доступна
Боковая панель исчезла
Index.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( lt;Routergt; lt;Routesgt; lt;Route path='/' element={lt;Login /gt;} /gt; lt;Route path='/api/v1/testpath' element={lt;Test /gt;} /gt; {/* Sidebar Routes */} lt;Route path="/api/v1/app/userHome" exact element={lt;Test /gt;} /gt; lt;Route path="/api/v1/app/schedule" exact element={lt;Scheduler /gt;} /gt; lt;Route path="/api/v1/app/myclassroom" exact element={lt;Classroom /gt;} /gt; lt;Route path="/api/v1/app/myassignments" exact element={lt;Assignment /gt;} /gt; lt;Route path="/api/v1/app/mymeetings" exact element={lt;Meeting /gt;} /gt; lt;Route path="/api/v1/app/viewreports" exact element={lt;ReportCard /gt;} /gt; lt;/Routesgt; lt;/Routergt;, document.getElementById('root') ); Sidebar.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: { "amp;:hover": { fontWeight: "fontWeightBold", background: "#f9f9f9", }, }, navlink: { textDecoration: "inherit", color: "inherit", }, }); export default function Sidemenubar() { const classes = useStyles(); return ( lt;Box sx={{ display: "flex" }}gt; lt;Divider /gt; lt;Drawer className={classes.drawer} variant="permanent" classes={{ paper: classes.drawerPaper }} anchor="left" gt; {/*App Logo */} lt;Avatar src={Logo} alt="404" sx={{ width: 100, height: 100, alignSelf: "center", margin: 1 }} /gt; {/*Menu Items */} lt;List component="nav"gt; lt;Link to="/api/v1/app/userHome" className={classes.navlink}gt; lt;ListItemButton sx={{ "amp;:hover": { fontWeight: "bold", boxShadow: 1, background: "#6D62DA", }, }} gt; lt;ListItemIcongt; lt;HomeIcon /gt; lt;/ListItemIcongt; lt;ListItemText primary="Home" /gt; lt;/ListItemButtongt; lt;/Linkgt; lt;Divider /gt; lt;Link to="/api/v1/app/schedule" className={classes.navlink}gt; lt;ListItemButton sx={{ "amp;:hover": { fontWeight: "bold", boxShadow: 1, background: "#6D62DA", }, }} gt; lt;ListItemIcongt; lt;WatchLaterIcon /gt; lt;/ListItemIcongt; lt;ListItemText primary="Scheduler" /gt; lt;/ListItemButtongt; lt;/Linkgt; lt;Divider /gt; lt;/Listgt; lt;/Drawergt; lt;Routesgt; lt;Route path='/api/v1/app/userHome' element={lt;Homepage /gt;}gt;lt;/Routegt; lt;Route path='/api/v1/app/schedule' element={lt;Scheduler /gt;}gt;lt;/Routegt; lt;/Routesgt; lt;/Boxgt; ); } HomePage.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 ( lt;Grid containergt; lt;Grid item md={4}gt; lt;SideMenuBar /gt; lt;/Gridgt; lt;Grid item md={8}gt; lt;HomePage /gt; lt;/Gridgt; lt;/Gridgt; ) } } export default Test; Комментарии:
1. Вы хотите сказать, что хотите, чтобы боковая панель отображалась независимо от текущего совпадающего/отображаемого маршрута? Вы хотите, чтобы боковая панель отображалась на всех маршрутах или только с определенным набором маршрутов? Вы хотите, чтобы все перенаправленные компоненты «страницы» отображались в
Grid item md={8}оболочке при отображении боковой панели?2. ДА. На самом деле я хочу сохранить боковую панель в качестве основного навигатора для всех моих компонентов и функций приложения.
Ответ №1:
Если вы хотите отображать боковую панель на каждом маршруте/странице, я предлагаю:
Использование компонента оболочки макета и розетки
Создайте компонент контейнера компоновки, который отображает Sidebar компонент и an Outlet в соответствующие столбцы сетки. Визуализируйте маршруты страниц, вложенные в макет.
import { Outlet } from 'react-router-dom'; import SideMenuBar from '../sidemenubar/SideMenuBar'; const PageLayout = () =gt; ( lt;Grid containergt; lt;Grid item md={4}gt; lt;SideMenuBar /gt; lt;/Gridgt; lt;Grid item md={8}gt; lt;Outlet /gt; // lt;-- nested routes rendered here lt;/Gridgt; lt;/Gridgt; ); index.js
lt;Routergt; lt;Routesgt; lt;Route path="/" element={lt;PageLayout /gt;} gt; lt;Route index element={lt;Login /gt;} /gt; lt;Route path="/api/v1/app/userHome" element={lt;UserHome /gt;} /gt; lt;Route path="/api/v1/app/schedule" element={lt;Scheduler /gt;} /gt; lt;Route path="/api/v1/app/myclassroom" element={lt;Classroom /gt;} /gt; lt;Route path="/api/v1/app/myassignments" element={lt;Assignment /gt;} /gt; lt;Route path="/api/v1/app/mymeetings" element={lt;Meeting /gt;} /gt; lt;Route path="/api/v1/app/viewreports" element={lt;ReportCard /gt;} /gt; lt;/Routegt; lt;/Routesgt; lt;/Routergt; Использование компонента оболочки и children опоры
Альтернативой могло бы быть то, чтобы PageLayout компонент children вместо этого отображал его и обертывал Routes компонент.
const PageLayout = ({ children }) =gt; ( lt;Grid containergt; lt;Grid item md={4}gt; lt;SideMenuBar /gt; lt;/Gridgt; lt;Grid item md={8}gt; {children} lt;/Gridgt; lt;/Gridgt; ); index.js
lt;Routergt; lt;PageLayoutgt; lt;Routesgt; lt;Route path="/ element={lt;Login /gt;} /gt; lt;Route path="/api/v1/app/userHome" element={lt;UserHome /gt;} /gt; lt;Route path="/api/v1/app/schedule" element={lt;Scheduler /gt;} /gt; lt;Route path="/api/v1/app/myclassroom" element={lt;Classroom /gt;} /gt; lt;Route path="/api/v1/app/myassignments" element={lt;Assignment /gt;} /gt; lt;Route path="/api/v1/app/mymeetings" element={lt;Meeting /gt;} /gt; lt;Route path="/api/v1/app/viewreports" element={lt;ReportCard /gt;} /gt; lt;/Routesgt; lt;/PageLayoutgt; lt;/Routergt;