React fullpageJS结合react-router-dom实现轮播出现空白屏问题

轮播区域空白、DOM中找不到对应节点的核心问题出在Home.jsx实现上，共有3处错误：

1. 组件没有返回值：Home函数组件中声明了<ReactFullpage />但没有写return，等于组件没有渲染任何内容，自然不会出现在DOM里
2. 重复嵌套Wrapper：代码里写了两层<ReactFullpage.Wrapper>，fullpage初始化时无法正确识别.section节点
3. 无意义的重渲染逻辑：用useEffect在组件挂载后才给projectsToPreview赋值静态数据，多触发了一次重渲染，可能干扰fullpage的初始化时机

按以下步骤修改代码即可：

• 给Home组件添加return语句，返回ReactFullpage组件
• 删除多余的一层ReactFullpage.Wrapper，仅保留一层直接包裹所有.section元素
• 移除不必要的useEffect，直接在useState初始化时传入PROJECTS_DATA，避免多余重渲染
• 补充全局高度样式，确保fullpage能正确计算全屏区块高度

Home.jsx #

import { useState } from "react";
import ProjectPreview from "../project-preview/project-preview.component";
import ReactFullpage from "@fullpage/react-fullpage";
import PROJECTS_DATA from "../../Projects";

const Home = () => {
  const [projectsToPreview] = useState(PROJECTS_DATA);

  return (
    <ReactFullpage
      scrollingSpeed={1000}
      // 其他fullpage配置项可写在这里，比如侧边导航、滚动回调等
      render={() => {
        return (
          <ReactFullpage.Wrapper>
            {projectsToPreview.map((project) => (
              <div className="section" key={project.id}>
                <h1>Test</h1>
                <ProjectPreview project={project} />
              </div>
            ))}
          </ReactFullpage.Wrapper>
        );
      }}
    />
  );
};
export default Home;

全局样式补充（index.css） #

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

其余App.jsx、Navigation.jsx、index.js代码逻辑没有问题，不需要修改。

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