React项目编译成功但本地页面空白问题排查求助

1. 路由配置缺失（最可能触发问题的原因） #

你的home.jsx中使用了react-router-dom的<Link>组件，但整个项目没有配置任何路由容器和规则。React Router的组件（比如<Link>、<Route>）必须在<BrowserRouter>（或同类路由容器）的包裹下才能正常工作，缺失这个容器会导致组件渲染异常，直接表现为页面空白。

修复步骤： #

• 先确认已安装react-router-dom，没装的话执行：

  npm install react-router-dom
  

• 修改index.js，添加路由容器和基础路由规则：

  import React from 'react';
  import ReactDOM from 'react-dom';
  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
  import App from './App';
  import Home from './components/home/home.jsx';
  
  ReactDOM.render(
    <React.StrictMode>
      <Router>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="/home" element={<Home />} />
          {/* 按需添加其他页面的路由，比如/marketplace、/settings等 */}
        </Routes>
      </Router>
    </React.StrictMode>,
    document.getElementById('root')
  );
  

• 也可以把路由规则放在App.js中，前提是index.js已经用<Router>包裹了<App>：

  import React from 'react';
  import { Routes, Route } from 'react-router-dom';
  import Home from './components/home/home.jsx';
  
  function App() {
    return (
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/home" element={<Home />} />
        </Routes>
      </div>
    );
  }
  
  export default App;
  

2. 检查根节点是否存在 #

打开public/index.html，确认里面有id="root"的DOM元素：

<div id="root"></div>

如果这个节点不存在，React无法挂载组件，页面必然空白。

3. 排查CSS样式问题 #

虽然你提到代码是从HTML移植的，但home.css可能包含隐藏元素的样式（比如display: none、opacity: 0、绝对定位导致元素出界等）。可以临时注释掉home.jsx里的import './home.css'，看页面是否能显示内容，以此排查样式问题。

4. 适配React新版本渲染API（可选） #

如果使用的是React 18及以上版本，ReactDOM.render已被标记为过时，建议改用新的渲染方式，避免潜在的兼容性问题：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

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

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