React新手求助：导入Navbar组件后页面空白问题排查

你的问题出在浏览器直接运行环境下，babel-standalone默认不支持ES模块的import语法加载本地文件，下面给你两种可行的解决方式：

方式一：改用ES模块模式加载文件 #

1. 修正index.html里的样式链接拼写错误（stylsheet→stylesheet），同时调整script标签为模块类型，让babel处理模块导入：

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>

        <script type="module" data-type="module">
            // 注意这里要写全文件名后缀.js
            import Navbar from './navbar.js';

            ReactDOM.render(<div>
                <Navbar />
            </div>, document.getElementById("root"));
        </script>
    </body>
</html>

2. navbar.js保持原代码不变即可，确保文件名和路径正确。

方式二：全局挂载组件，不用import #

这种方式更适合浏览器全局环境的简单场景：

1. 修改navbar.js，把组件挂载到全局window对象上：

window.Navbar = function Navbar(){
    return<nav className="Navbar">
        <a href="/" className="site-title">
            Hello name of the site
        </a>
        <ul>
            <li>
                <a href="/pricing_option1">Pricing_option1</a>
                <a href="/pricing_option2">pricing_option2</a>
            </li>
        </ul>
    </nav>
}

2. 在index.html中先引入navbar.js，再引入file.js：

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>

        <script src="navbar.js" type="text/babel"></script>
        <script src="file.js" type="text/babel"></script>
    </body>
</html>

3. 修改file.js，去掉import语句直接使用组件：

ReactDOM.render(<div>
    <Navbar />
  </div>, document.getElementById("root"))

额外建议 #

如果你是React新手，更推荐使用Create React App、Vite这类官方/主流脚手架工具来创建项目，它们会自动处理模块导入、代码打包、开发服务等一系列问题，不用手动在浏览器环境中折腾这些基础配置。

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