React新项目启动后仅显示黑屏，无报错但组件无法渲染

问题说明 #

搭建新React项目后启动黑屏，无报错提示，怀疑导入/导出环节出错，不确定是否需要在index.html中手动导入index.js。

提供的代码 #

App.js

import Navbar from './Components/Navbar';
import Home from './Components/Home';
import Login from './Components/Login';
import Register from './Components/Register';
import CreatePost from './Components/CreatePost';
import AllPost from './Components/AllPost';
import NotFound from './Components/NotFound';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Navbar />
        <Routes>
        <Navigate from='/CreatePost' to='/Register' />
          <Route exact path='/' component={Home}>
            <Home />
          </Route>

          <Route exact path='/Register' component={Register}>
            <Register /> 
          </Route>

          <Route exact path='/Login' component={Login}>
            <Login />
          </Route>

          <Route exact path='/CreatePost' component={CreatePost}>
            <CreatePost />
          </Route>

          <Route exact path='/AllPost' component={AllPost}>
            <AllPost />
          </Route>

          <Route component=
            {NotFound}>

          </Route>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

index.js

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


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

问题排查与解决 #

1. 关于index.html导入index.js
   不用手动导入，create-react-app脚手架已经通过webpack配置好了自动打包引入，只要index.html里有<div id="root"></div>即可，你的index.js已经正确挂载到root元素上，这部分没问题。

2. 核心问题：React Router版本不兼容的写法
   你用的是React Router v6，但代码写的是v5的语法，这是导致黑屏的关键：

• v6中<Route>不再支持component和exact属性，改用element属性传入组件；
• v6默认就是精确匹配，无需exact；
• 未导入BrowserRouter、Routes、Route、Navigate这些路由核心组件；
• 原代码中<Route>标签内嵌套组件的写法是v5的嵌套路由方式，v6不需要这么写，直接通过element传入即可。

修改后的App.js代码 #

// 先导入必要的路由组件
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Navbar from './Components/Navbar';
import Home from './Components/Home';
import Login from './Components/Login';
import Register from './Components/Register';
import CreatePost from './Components/CreatePost';
import AllPost from './Components/AllPost';
import NotFound from './Components/NotFound';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Navbar />
        <Routes>
          {/* 重定向规则，添加replace避免回退历史问题 */}
          <Navigate from='/CreatePost' to='/Register' replace />
          {/* 路由配置 */}
          <Route path='/' element={<Home />} />
          <Route path='/Register' element={<Register />} />
          <Route path='/Login' element={<Login />} />
          <Route path='/AllPost' element={<AllPost />} />
          {/* 404页面，匹配所有未定义路由 */}
          <Route path='*' element={<NotFound />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

额外检查点 #

• 确认Navbar、Home等组件本身有内容渲染（比如至少有文本或DOM元素），如果组件为空也会导致页面看起来黑屏；
• 检查浏览器控制台的警告标签，有时候报错会被隐藏在警告里。

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