ReactJS多页面渲染实现及About页面跳转空白问题求助

核心问题点： #

• 组件文件错误执行根渲染逻辑：你在About组件文件中调用了ReactDOM.createRoot(document.getElementById('root')).render(About)，这是完全错误的。React应用的根渲染逻辑应该放在入口文件（如index.js）中，组件文件仅负责定义并导出组件即可。同时，render方法需要接收JSX元素（即<About />），而非直接传入组件函数About。
• 函数声明顺序不规范：你先调用了root.render(About)，之后才定义About函数。虽然JS的函数提升机制可能避免报错，但这种写法不符合代码规范，逻辑上也不合理。

修复后的About组件代码： #

import React from "react";
import "../index.css";
import maleUser from "../icons8-male-static.png";
import shipDock from "../img/delivery-cargo.jpg";
import fastDelivery from "../img/fast-del-truck.svg";
import supportIcon from "../img/supporticon.svg";
import gpsIcon from "../img/gps.svg";
import secureImage from "../img/secureicon.svg";

function About() {
    return (
        <>  
            {/* Carousel Container  start --- */}
            <section className="header-carousel">
            <div className="flex-container">
                <div className="cargoImage flex-child">
                <span className="header-intro-text">
                    <h1>
                    ABOUT US
                    </h1>

                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et
                    felis non <br />
                    risus vehicula finibus quis et nunc. In diam odio, ultrices
                    blandit tortor <br />
                    id, faucibus dignissim elit. Integer aliquet varius sodales.
                    <br />
                    </p>
                </span>
                </div>

                <div className="courusel-i-bar flex-child container-l">
                
                </div>
            </div>
            </section>
        </>
    );
}

export default About;

补充说明： #

确保你的入口文件（如index.js）中已正确配置路由或组件渲染逻辑，比如使用React Router时，需在路由配置中引入About组件并设置对应路径，而非在组件内部自行执行根渲染。

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