React渲染器中root div放置位置及组件内容不显示问题

我创建了MainPage文件夹，在其中新建了Main.js文件，希望通过该组件在页面展示指定内容。虽然已在App.js中引入Main.js，但页面并未显示对应内容。我尝试了多种解决方案均无效，曾在HTML中创建id为"root"的div，但不确定其正确放置位置。

Main.js代码 #

import React from 'react';
import './Main.css';

export default function Main()
{
return
(

   <body>
      <div id='root'>
      <header className="header">
        <div className="top-bar">
          <div className="top-bar__content">
            <section className="phone">
              <i className="fa-solid fa-phone icon"></i>
              <span></span>
            </section>
            <section className="email">
              <i className="fa-solid fa-envelope icon"></i>
              <span></span>
            </section>
          </div>
        </div>

        <div className="bottom-bar">
          <div className="bottom-bar__content">
            <a href="#" className="logo">
              <img className="logo__img" src="pictures/logo.svg" alt="logo" />
              <span className="logo__text"></span>
            </a>

            <nav className="nav">
              <ul className="nav__list">
                <li className="nav__item">
                  <a className="nav__link" href="#"></a>
                </li>
                <li className="nav__item">
                  <a className="nav__link" href="#"></a>
                </li>
                <li className="nav__item">
                  <a className="nav__link" href="#"></a>
                </li>
                <li className="nav__item">
                  <a className="btn" href="#"></a>
                </li>
              </ul>
            </nav>
      
            <div className="hamburger">
              <div className="bar"></div>
              <div className="bar"></div>
              <div className="bar"></div>
            </div>
          </div>
        </div>

      </header>
      </div>
      </body>

);
}

App.js代码 #

import React from 'react';
import Main from './MainPage/Main';

function App() {
  return (
    <div className="App">
      <Main />
    </div>
  );
}

export default App;

index.js代码 #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

你的代码存在几个核心问题，直接导致页面无法显示内容：

1. return语句的自动分号插入问题
   JavaScript的自动分号插入机制会在单独成行的return后自动添加分号，使得后续的JSX代码完全不被执行。必须将return和紧跟的括号放在同一行：

export default function Main() {
  return (
    // JSX内容
  );
}

2. 组件内错误嵌套和#root元素
   React应用中，id="root"的div是整个应用的挂载容器，必须放在public/index.html的<body>内部，组件本身不需要也不能再定义<body>和<div id='root'>，组件只需返回自身的内容节点（比如你的<header>）。

3. 图片路径错误
   React中引用图片分两种情况：

• 若图片放在public文件夹下，路径需以/开头：src="/pictures/logo.svg"
• 若图片放在src文件夹下，需先导入再使用：

  import logo from './pictures/logo.svg';
  // 然后用 src={logo}
  

修改后的Main.js示例 #

import React from 'react';
import './Main.css';
import logo from './pictures/logo.svg'; // 假设图片在src/MainPage/pictures目录下

export default function Main() {
  return (
    <header className="header">
      <div className="top-bar">
        <div className="top-bar__content">
          <section className="phone">
            <i className="fa-solid fa-phone icon"></i>
            <span></span>
          </section>
          <section className="email">
            <i className="fa-solid fa-envelope icon"></i>
            <span></span>
          </section>
        </div>
      </div>

      <div className="bottom-bar">
        <div className="bottom-bar__content">
          <a href="#" className="logo">
            <img className="logo__img" src={logo} alt="logo" />
            <span className="logo__text"></span>
          </a>

          <nav className="nav">
            <ul className="nav__list">
              <li className="nav__item">
                <a className="nav__link" href="#">首页</a>
              </li>
              <li className="nav__item">
                <a className="nav__link" href="#">关于</a>
              </li>
              <li className="nav__item">
                <a className="nav__link" href="#">服务</a>
              </li>
              <li className="nav__item">
                <a className="btn" href="#">联系我们</a>
              </li>
            </ul>
          </nav>
    
          <div className="hamburger">
            <div className="bar"></div>
            <div className="bar"></div>
            <div className="bar"></div>
          </div>
        </div>
      </div>
    </header>
  );
}

4. 确认public/index.html的#root位置
   你的index.html需保证#root放在<body>内部，示例如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
    <title>React App</title>
  </head>
  <body>
    <noscript>需要启用JavaScript才能运行此应用。</noscript>
    <div id="root"></div>
  </body>
</html>

完成以上修改后，重启开发服务器，页面即可正常显示内容。

内容的提问来源于stack exchange，提问作者SZENTIOSZ the SZAMOSZ