React应用路由组件无法渲染、页面白屏问题排查

白屏问题由4处代码错误共同导致，按以下步骤修改即可恢复：

1. 清理App.js冗余错误代码 #

App.js存在3处致命问题：一是多余套了一层BrowserRouter，和index.js的路由容器重复嵌套；二是文件末尾错误写入了根节点渲染逻辑，和入口文件的挂载逻辑冲突；三是在<Routes>标签内直接放置了非路由组件<Navbar />，v6版本react-router-dom要求Routes的直接子元素只能是Route组件，非路由组件放在Routes内部会直接抛出渲染异常。
删除App.js末尾所有和ReactDOM挂载相关的代码，移除外层BrowserRouter，将Navbar移到Routes外层平级放置，修复后完整代码：

import { Route, Routes } from "react-router-dom";
import Dashboard from "./components/Dashboard";
import Login from "./components/Login";
import Navbar from "./components/Navbar";
import Register from "./components/Register";

export default function App() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </>
  );
}

2. 修复index.js渲染逻辑 #

index.js存在React渲染API和版本不匹配问题，如果你使用的是React 18版本，统一使用createRoot挂载方法，保留单层BrowserRouter即可，修复后完整代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import "bulma/css/bulma.css";
import axios from "axios";
import { BrowserRouter } from "react-router-dom";

axios.defaults.withCredentials = true;

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

如果是React 17及以下版本，保留原有ReactDOM.render写法即可，不需要引入react-dom/client。

3. 修复Register组件路由跳转错误 #

react-router-dom v6版本中，useNavigate返回的是可直接调用的函数，不存在push方法，原有navigate.push("/")写法会触发JS报错。找到register.js里的跳转逻辑，替换为：

// 错误写法：navigate.push("/")
navigate("/")

4. 缺失文件检查 #

确认src/components路径下Dashboard.jsx、Login.jsx、Navbar.jsx、Register.jsx四个组件文件未被误删，缺失文件会导致模块引入失败直接白屏。
所有修改完成后，重启本地开发服务npm start，清空浏览器缓存即可正常访问页面，排查过程中可以直接打开浏览器控制台（F12）查看Console栏的红色报错，对应定位剩余问题。

内容的提问来源于stack exchange，提问作者Sidas Vidūnas