运行React应用（npm start启动）时出现黑屏问题求助

通过npm start启动React应用后页面出现黑屏，以下是相关代码文件：

index.js代码 #

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { store } from "./store";

ReactDOM.render(
  <BrowserRouter>
    <React.StrictMode>
      <Provider store={store}>
        <App />
      </Provider>
    </React.StrictMode>
  </BrowserRouter>,
  document.getElementById("root")
);

App.js代码 #

import React from "react";
import { useSelector } from "react-redux";
import { Route, Routes } from "react-router-dom";
import "./App.css";
import Header from "./components/Header";
import Login from "./components/Login";
import Signup from "./components/Signup";
import Welcome from "./components/Welcome";

function App() {
  
  const isLoggedIn = useSelector(state => state.isLoggedIn);
  console.log(isLoggedIn);
  return (
    <React.Fragment>
      <header>
        <Header />
      </header>
      <main>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/signup" element={<Signup />} />
          { isLoggedIn && <Route path="/user" element={<Welcome />} />}
        </Routes>
      </main>
    </React.Fragment>
  );
}

export default App;

相关截图 #

解决建议 #

• 补充根路径路由配置：当前路由未设置根路径/的匹配规则，直接访问根路径时无对应组件渲染导致空白。可添加根路由，比如重定向到登录页：

  // 需先导入Navigate组件
  import { Route, Routes, Navigate } from "react-router-dom";
  
  // 在Routes中添加
  <Route path="/" element={<Navigate to="/login" />} />
  

• 检查Redux初始状态：确认store中isLoggedIn的初始值是否合理，若初始为false，/user路由不会渲染，此时根路径无匹配就会空白。需确保store的初始state正确设置isLoggedIn。
• 验证组件渲染有效性：暂时替换Header、Login等组件为简单文本（如<h1>测试内容</h1>），排查是否是组件自身问题导致无法渲染。
• 查看控制台错误信息：打开浏览器开发者工具（F12）的Console面板，检查是否存在语法错误、组件导入失败或Redux相关报错，这类错误常导致页面无法正常渲染。
• 修正ReactDOM渲染方式：React 18+推荐使用createRoot方法渲染，替换原有ReactDOM.render写法：

  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(
    <BrowserRouter>
      <React.StrictMode>
        <Provider store={store}>
          <App />
        </Provider>
      </React.StrictMode>
    </BrowserRouter>
  );
  

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