React Router动态路由生产环境空白页问题求助

问题根源 #

生产环境直接访问/Information/:id这类动态路由时，服务器会尝试寻找对应物理路径的文件，但React单页应用的所有路由逻辑都在前端，服务器找不到对应文件就返回空白。package.json里的homepage: "."仅解决了静态资源的相对路径加载问题，没处理路由请求的 fallback 配置。

具体解决方案 #

方案一：改用HashRouter #

如果不想折腾服务器配置，直接把BrowserRouter替换成HashRouter，路由会以#作为标识（比如/#/Information/123），服务器只会处理根路径请求，路由逻辑完全由前端接管：

修改App.js代码：

import Information from './pages/Auth/Information/Information';
import { HashRouter, Routes, Route } from "react-router-dom";

function App() {
 return(
 <div className="App">
  <Provider store={store}>
       <HashRouter>
         <Routes>
           <Route path="someother" element={<Someother />} />
           <Route path='/Information/:id' element={<Information />} />
         </Routes>
       </HashRouter>
     </Provider>
  </div>
 )
}

注意：react-router-dom v6版本中Routes下的Route默认精确匹配，无需再写exact属性。

方案二：配置服务器Fallback路由 #

如果要保留BrowserRouter的干净路由格式，需要配置服务器让所有路由请求都返回项目根目录的index.html，以下是常见服务器的配置方式：

• Nginx：修改站点配置文件，添加try_files规则

location / {
  try_files $uri $uri/ /index.html;
}

• Netlify：在项目根目录创建_redirects文件，写入

/*    /index.html   200

• Vercel：在项目根目录创建vercel.json文件，配置rewrites规则

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

额外优化 #

你的代码中使用了react-router-dom v6版本，该版本已移除exact属性，建议删除所有Route上的exact，避免潜在的匹配问题。

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