我试图创建一个简单的React项目。它有一个导航栏，侧边栏和主要内容区。
首先显示家庭组件。
home.js

import { useState } from "react";
import Navbar from "../navbar/navbar";
import Sidebar from "../sidebar/sidebar";
import "./style.css";
import { useSelector, useDispatch } from 'react-redux'

function Home() {
  const sidebarOpen = useSelector((state) => state.sidebarOpenState);
  

  return (
    <>
      <Navbar />

      <div className="home-box d-flex">
        {sidebarOpen && <div className="p-2 flex-fill"><Sidebar /></div>}
        
        
      </div>
    </>
  );
}

export default Home;

我的导航栏有一个按钮，将改变状态sidebarOpen。
我的侧边栏看起来像这样-〉sidebar.js

import "./style.css";
import { Link } from "react-router-dom";

function Sidebar() {
  return (
    <div className="divSidebar">
      <ul>
        <li>
          <Link to="/chess">
            <img className="sidebar-img" src="images/sidebar/chess.png"></img>
            <span className="sidebar-text">Chess</span>
          </Link>
        </li>
        <li>
          <Link to="/volleyball">
            <img
              className="sidebar-img"
              src="images/sidebar/volleyball.png"
            ></img>
            <span className="sidebar-text">Volleyball</span>
          </Link>
        </li>
        <li>
          <Link to="/football">
            <img
              className="sidebar-img"
              src="images/sidebar/football.png"
            ></img>
            <span className="sidebar-text">Football</span>
          </Link>
        </li>
        <li>
          <Link to="/tabletennis">
            <img
              className="sidebar-img"
              src="images/sidebar/table-tennis.png"
            ></img>
            <span className="sidebar-text">TableTennis</span>
          </Link>
        </li>
        <li>
          <Link to="/rugby">
            <img className="sidebar-img" src="images/sidebar/rugby.png"></img>
            <span className="sidebar-text">Rugby</span>
          </Link>
        </li>
      </ul>
    </div>
  );
}

export default Sidebar;

当我点击chess时，相应的组件应该被加载。chess.js

function Chess() {
  return (
    <>
    <h1>chess</h1>
    </>
  );
}

export default Chess;

但问题是我的侧边栏消失了。我只想改变主要内容区没有别的。有人能帮忙吗？让我知道如果你想一些更多的代码。
---------编辑
我已经在两个地方添加了console.log。一个是在navbar中定义了切换方法，另一个是在redux store中定义了切换状态。两个地方onclick都正常工作。我可以看到消息，但侧边栏没有得到渲染。
--------编辑2
App.js

import "./App.css";
import Navbar from "./components/navbar/navbar";
import { Route, Routes } from "react-router-dom";
import Chess from "./components/chess/chess";
import Volleyball from "./components/volleyball/volleyball";
import Football from "./components/football/football";
import TableTennis from "./components/tabletennis/tabletennis";
import Rugby from "./components/rugby/rugby";
import Home from "./components/home/home";

function App() {
  return (
    <div className="App">
      <Routes>
        <Route exact path="/" element={<Home />} />

        <Route
          path="/chess"
          element={
            <>
              <Navbar />
              <Chess />
            </>
          }
        />

        <Route
          path="/volleyball"
          element={
            <>
              <Navbar />
              <Volleyball />
            </>
          }
        />

        <Route
          path="/tabletennis"
          element={
            <>
              <Navbar />
              <TableTennis />
            </>
          }
        />

        <Route
          path="/football"
          element={
            <>
              <Navbar />
              <Football />
            </>
          }
        />

        <Route
          path="/rugby"
          element={
            <>
              <Navbar />
              <Rugby />
            </>
          }
        />
      </Routes>
    </div>
  );
}

export default App;