React JS页面空白屏问题求助：降级npm后仍未解决

问题描述 #

尝试了多种解决方法，包括为BrowserRouter设置basename属性；最初使用Switch组件，后发现npm 6.0及以上版本对应的react-router-dom已将其替换为Routes，于是将npm降级至5.2.3，但页面仍显示空白屏，希望得到解决建议。

相关代码 #

App.js #

import logo from './logo.svg';
import './App.css';

import {Home} from './Home';
import {Department} from './Department';
import {Employee} from './Employee';
import {Navigation} from './Navigation';

import { BrowserRouter, Switch, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter basename='/index.html'>
    <div className="container">
     <h3 className="m-3 d-flex justify-content-center">
       React JS Tutorial
     </h3>

     <Navigation/>

     <Switch>
       <Route path='/' component={Home} exact/>
       <Route path='/department' component={Department}/>
       <Route path='/employee' component={Employee}/>
     </Switch>
    </div>
    </BrowserRouter>
  );
}

export default App;

index.js #

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

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

reportWebVitals();

解决建议 #

• 确认react-router-dom版本：npm降级到5.2.3后，需确保安装的是v5.x版本的react-router-dom（v6才用Routes替代Switch）。执行npm list react-router-dom查看版本，若为v6，执行npm uninstall react-router-dom && npm install react-router-dom@5重新安装适配版本
• 移除basename='/index.html'：该属性用于设置路由基础路径（如部署在子目录场景），若项目部署在根目录，此设置会导致路由匹配失效，直接删除该属性后测试
• 排查Navigation组件：空白屏可能因该组件报错导致整个App渲染失败，先注释掉<Navigation/>，观察页面是否能显示标题及Home组件内容，确认是否为此组件问题
• 查看浏览器控制台：按F12打开控制台，检查是否有组件导入错误、语法错误或路由匹配相关报错，这是定位空白屏问题最直接的方式
• 测试基础组件：将Home/Department/Employee组件替换为简单内容（如<div>测试内容</div>），排查是否因这些组件内部逻辑错误导致页面空白

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