React侧边栏被页面组件覆盖：如何正确创建页面分区？

我希望SideNavBar能够铺满整个页面，但添加Home、Contact和Projects这类仅包含div与h1的常规函数式组件作为页面分区后，这些分区会占据页面空间并覆盖侧边栏。我尝试过在index.js和App.js中渲染组件但未成功，目前SideNavBar从index.js渲染，页面分区从App.js渲染。我曾尝试为分区设置最大宽度与透明背景，但仍无法解决覆盖问题，请问创建页面分区的正确方式是什么？

示例代码 #

HomeSection组件：

import React from "react";
import "../Section.css";

function HomeSection() {
return (
 <div className="Section" id="Home">
HomeSection
<h1>Home</h1>
</div>
);
}

export default HomeSection;

Section.css仅实现页面文本居中效果。

SideNavBar组件及CSS：

import React, { useState } from "react";
import { Link } from "react-scroll";
import Stickybox from "react-sticky-box";

function SideNavBar() {
const [titleActive, setTitleActive] = useState("Home");
return (
 <div className="SideNavBar">
 <Stickybox>
   <ul className="SideBarList">
     {SideBarInfo.map((info, key) => {
       return (
        <li
          key={key}
           className="rad"
            onClick={() => {
            console.log(info.title + " clicked");
            setTitleActive(info.title);
             }}
            id={titleActive === info.title ? "active" : ""}
            >
             <Link
             onClick={() => {
              console.log(info.title + " clicked");
              setTitleActive(info.title);
            }}
            id={titleActive === info.title ? "active" : ""}
            activeClass="active"
            to={info.title}
            spy={true}
            smooth={true}
            offset={50}
            duration={500}
            >
            <div id="title">{info.title}</div>
           </Link>
           <Link
              activeClass="active"
              to={info.title}
              spy={true}
              smooth={true}
              offset={50}
              duration={500}
            >
             <div id="bild">{info.bild}</div>
           </Link>
         </li>
       );
     })}
   </ul>
 </Stickybox>
 </div>
 );
}

export default SideNavBar;

/* this is the css for sidebar */
.SideNavBar {
 width: 250px;
 min-height: 5000px;
 background-color: rgb(47, 167, 223);
 height: 100vh;
 }

效果截图 #

• 预期侧边栏效果：
• 无分区时侧边栏效果：
• 分区覆盖侧边栏效果：（为HomeSection添加红色背景以便观察）

1. 统一布局容器，合并组件渲染 #

将侧边栏和页面分区放在同一个父容器中，避免分散渲染导致的层级冲突。修改App.js结构：

import React from "react";
import SideNavBar from "./SideNavBar";
import HomeSection from "./HomeSection";
import ContactSection from "./ContactSection";
import ProjectsSection from "./ProjectsSection";
import "./App.css";

function App() {
  return (
    <div className="AppContainer">
      <SideNavBar />
      <div className="ContentArea">
        <HomeSection />
        <ContactSection />
        <ProjectsSection />
      </div>
    </div>
  );
}

export default App;

同时删除index.js中单独渲染SideNavBar的代码，只保留App组件的渲染逻辑。

2. 用Flexbox实现左右布局，设置空间分配 #

通过CSS Flexbox让侧边栏固定宽度，内容区域占据剩余空间：

.AppContainer {
  display: flex;
  min-height: 100vh;
}

.SideNavBar {
  width: 250px;
  min-height: 100vh;
  background-color: rgb(47, 167, 223);
  /* 固定侧边栏位置，滚动内容时不跟随移动 */
  position: sticky;
  top: 0;
}

.ContentArea {
  flex: 1;
  /* 可选：添加内边距避免内容贴边 */
  padding: 20px;
}

.Section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

3. 处理层级覆盖问题 #

如果仍有内容覆盖侧边栏，给侧边栏设置更高层级：

.SideNavBar {
  /* 其他样式不变 */
  z-index: 100;
}

4. 修正SideNavBar的状态初始化错误 #

原代码中useState(HomeSection)是错误的，应初始化对应分区的id字符串，比如useState("Home")，否则active状态判断会失效。

内容的提问来源于stack exchange，提问作者thugcat85