React-Router-dom v5升级v6后网页内容不显示问题求助

参考代码材料 #

• App.js代码截图：
  
• index.js代码截图：
  

核心故障原因（v5升v6破坏性变更踩坑） #

所有白屏问题基本都是未适配v6不兼容API导致，按以下点逐一核对即可修复：

• 外层路由容器错误
  v6 不再支持v5中直接引入Router搭配自定义history作为根容器的写法，index.js根节点必须用官方提供的BrowserRouter（对应history模式）或HashRouter（对应hash模式）包裹整个App组件，漏包容器是白屏最高发原因。正确写法：

  // index.js 正确示例
  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import { BrowserRouter } from 'react-router-dom';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
  

  若必须使用自定义history，需引入unstable_HistoryRouter替代原生Router，否则路由实例无法初始化会直接导致页面崩溃。

• 路由核心组件写法不兼容
  v6 彻底移除了v5的Switch、Redirect组件，相关API全部重构：
  1. 所有路由匹配外层必须用Routes替换原Switch，且Route组件必须是Routes的直接子节点，中间不能嵌套其他自定义标签
  2. Route的组件传参废弃了原component、render、children属性，统一用element属性传入JSX元素，直接传组件引用的写法在v6下会直接抛错
  3. 重定向逻辑统一用Navigate组件替换原Redirect，404兜底重定向写法为<Route path="*" element={<Navigate to="/home" replace />} />
     App.js中路由部分正确写法参考：

  // App.js 路由正确示例
  import { Routes, Route, Navigate } from 'react-router-dom';
  import Home from './pages/Home';
  import About from './pages/About';
  
  function App() {
    return (
      <div className="app">
        {/* 导航栏等全局组件可放在Routes外层 */}
        <Routes>
          <Route path="/home" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="*" element={<Navigate to="/home" replace />} />
        </Routes>
      </div>
    )
  }
  

• 嵌套路由配置错误
  若使用嵌套路由，父级路由路径末尾必须加/*通配符，且父组件中必须引入<Outlet />组件作为子路由的渲染占位，漏写会导致子路由页面无法正常渲染。
• 依赖冲突
  检查项目依赖中react-router-dom版本，确认安装的是6.x稳定版，若同时存在v5、v6两个版本的依赖缓存，会导致API调用冲突白屏，可删除依赖锁文件和node_modules后重新安装依赖。

快速排查技巧 #

直接打开浏览器开发者工具的Console面板，90%以上的场景控制台会明确抛出具体错误，比如Switch is not exported from 'react-router-dom'、Cannot read properties of undefined (reading 'pathname')这类提示，对应替换不兼容API即可快速修复。

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