React-Router v6 生产环境Route组件不渲染问题排查求助

问题表现 #

• 基于React.js开发的单页应用，使用react-router-dom v6实现路由
• 本地开发环境运行完全正常，部署到生产环境后<Route />组件无任何内容渲染
• 已验证<Routes />外部的元素可正常渲染，排除部署路径错误问题
• 已尝试调整package.json的homepage配置、为<Routes>设置homebase属性、内联路由组件等操作，均无效果

原问题代码（App.js） #

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

const App = () => {
  const title = `${(process.env.REACT_APP_TITLE)}`;

  const TwentyfourStats = () => (<h2>Works</h2>);

  return (
    <Router>
      <div id="app" className="App">
        <h2>{title}</h2>
        <div>
          <Routes>
            <Route path="/" element={<TwentyfourStats />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

解决方法 #

将路由模式从BrowserRouter替换为HashRouter即可解决该问题，无需修改其他逻辑。
修改后的导入代码如下：

// 替换前
// import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
// 替换后
import { HashRouter as Router, Routes, Route } from 'react-router-dom';

原因说明 #

BrowserRouter依赖服务端的配置支持，需要服务端将所有路径的请求都重定向到应用的index.html入口文件，否则生产环境下服务端会把路由路径当作真实资源路径处理，返回404导致路由无法正常渲染。
HashRouter使用URL的hash（#）部分存储路由信息，该部分内容不会发送到服务端，无需服务端做额外配置即可适配各类静态资源部署环境。

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