React配置<Route>路由组件后页面空白问题排查

页面白屏是因为你本地安装的react-router-dom为v6+版本，代码用的是已经废弃的v5版本API，语法不兼容直接触发运行时错误，React渲染中断就会出现空白页。
你代码里踩的v5/v6不兼容点：

• v6要求所有<Route>组件必须嵌套在<Routes>组件内，不能直接作为<Router>的子元素
• v6移除了component、render路由传参属性，统一用element属性接收要渲染的JSX节点
• v6默认采用精确路径匹配规则，根路径/不会误匹配/premium这类子路径，不需要额外加exact标记

直接把代码调整为v6兼容写法即可，修复后的完整代码：

import './App.css';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'

function App() {
  return (
    <Router>
      <div>
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <Link className="navbar-brand" to="/">Logo</Link>
          <div className="navbar-nav">
            <Link className="nav-item nav-link" to="/">Home</Link>
            <Link className="nav-item nav-link" to="/premium">About Me</Link>
          </div>
        </nav>
      </div>
      <Routes>
        <Route path="/" element={<h4>Home</h4>} />
        <Route path="/premium" element={<h4>About Me</h4>} />
      </Routes>
    </Router>
  );
}

export default App;

如果你不想改现有v5语法，也可以降级依赖版本：先执行npm uninstall react-router-dom卸载现有版本，再执行npm install react-router-dom@5.3.4安装v5最终稳定版即可正常运行。但v5已经停止官方维护，更推荐使用v6写法。

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