React 17.0.2引入react-router-dom组件后页面空白问题排查

该白屏问题是版本兼容问题+用法错误共同导致的：

1. 核心触发原因：react-router-dom@6.3.0 没有做React低版本兼容处理，内部直接调用了React 18才正式提供的useSyncExternalStore API，在React 17环境下运行会直接抛出useSyncExternalStore is not a function的运行时错误，中断整个React渲染流程，最终表现为页面空白。你提到的「仅引入组件不写复杂逻辑也白屏、官方示例无法运行」都是这个原因导致的。
2. 你的复现代码额外存在用法错误：Link、Routes、Route这类路由组件必须放在路由上下文容器（即你导入的BrowserRouter）内部才能正常读取路由状态，脱离上下文直接渲染这类组件也会抛出上下文缺失的运行时错误。

你之前尝试的修改package.json中homepage、proxy配置的方案，分别是用来解决生产部署二级路径资源404、本地开发接口跨域代理的问题，和当前运行时报错导致的白屏完全无关，自然无法生效。

根据你的项目技术栈选择对应方案即可：

• 方案1（保留React 17版本，成本最低）：降级react-router相关依赖到完全兼容React 17的稳定版本，在项目目录执行以下命令锁定版本：

npm install react-router@6.2.2 react-router-dom@6.2.2

6.2.2是v6大版本中最后一个未引入React 18专属API的稳定版，所有v6的路由能力都可正常使用。

• 方案2：将项目React版本升级到18.x，匹配react-router-dom@6.3.0及以上版本的依赖要求。注意升级React 18需要同步修改入口文件的渲染逻辑，将原有的ReactDOM.render写法替换为ReactDOM.createRoot写法，否则会触发控制台警告。

修复版本问题后，还需要修正路由组件的包裹逻辑，所有路由相关组件必须放在BrowserRouter内部，最简可运行代码示例如下：

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const Home = () => <div>首页</div>;
const About = () => <div>关于页面</div>;

const App = () => {
  return (
    <Router>
      <div>
        <p>Test</p>
        <Link to="/">跳转首页</Link>
        <Link to="/about">跳转关于页</Link>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
};

export default App;

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