React组件render函数未返回HTML 运行白屏如何解决

白屏核心诱因是react-router-dom版本和代码写法不匹配，其次是组件放置逻辑不合理，按以下步骤排查修复： #

优先排查：React Router版本适配问题 #

当前npm默认安装的react-router-dom为v6版本，v6完全废弃了v5版本的component传参、无包裹路由的写法，语法不兼容会直接导致组件无法渲染、页面白屏，打开浏览器控制台如果出现A <Route> is only ever to be used as the child of <Routes> element报错即可确认是该问题。

v6版本正确写法 #

Navbar作为全局导航栏不需要绑定路由规则，直接放在路由容器外层即可实现所有页面常驻显示，App.js修改为如下代码：

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
// 引入v6必需的Routes组件
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

import Navbar from "./components/navbar"
import CreateUser from "./components/create-user";

function App() {
  return (
    <Router>
      <div className="container">
        {/* 全局导航栏直接渲染，不用放在Route内 */}
        <Navbar />
        <br/>
        {/* v6要求所有Route必须被Routes包裹 */}
        <Routes>
          {/* v6用element属性传入JSX形式的组件，不再支持component属性 */}
          <Route path="/user" element={<CreateUser />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

如果你使用的是React Router v5版本 #

v5版本需要用Switch组件包裹路由规则避免多路由匹配冲突，同时注意全局组件不要绑定到路由上，修改代码如下：

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import Navbar from "./components/navbar"
import CreateUser from "./components/create-user";

function App() {
  return (
    <Router>
      <div className="container">
        <Navbar />
        <br/>
        <Switch>
          <Route path="/user" component={CreateUser} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

其他兜底排查项 #

• 确认组件导入路径大小写完全匹配，Linux部署环境下./components/Navbar和./components/navbar是两个不同路径，路径写错会导致导入失败白屏
• 确认create-user.js组件和Navbar组件写法一致，render函数/函数组件返回值为合法JSX，无语法错误
• 确认项目入口index.js正确挂载App组件，参考如下标准写法：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

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

内容的提问来源于stack exchange，提问作者Anik Islam Pantha