如何在中打开反应组件<main>使用 react-burger-menu 时？</main>

Question

Here is my code.

I am using react-burger-menu to implement the sidebar.

The sidebar is working properly.

My problem is how to open the Home or GG within the tag?

Now, when I click the link the browser shows the component content correctly, however, the sidebar disappears.

I want to keep the sidebar when I browse different component.

is it possible?

would you tell me if other modules can do so?

thank you very much

Answer 1

It works if you change your App.js to this:

import GG from "./GG";
import Home from "./Home";
import Main from "./Main";
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "./style.css";    
import Sidebar from "./sideBar/SideBar";

export default function App() {
  return (
    <Router>
      <Sidebar pageWrapId={"page-wrap"} outerContainerId={"app"} />
      <Switch>
        <Route exact path="/" component={Main} />
        <Route exact path="/home" component={Home} />
        <Route exact path="/gg" component={GG} />
      </Switch>
    </Router>
  );
}

and remove the following from Main.js :

 <Sidebar
        pageWrapId={"page-wrap"}
        outerContainerId={"app"}
 />