Create React App项目.htaccess正则URL重写后404错误修复咨询

问题原因 #

你的.htaccess仅完成了旧英文路径到新土耳其语路径的301重定向，但未配置单页应用的路由 fallback——当用户访问土耳其语路径（如/anasayfa）时，服务器找不到对应的物理文件，直接返回404，未将请求转发到React的入口文件index.html，导致React Router无法接管路由处理。

修复后的.htaccess配置 #

替换现有.htaccess内容为以下代码，确保重定向规则在前，fallback规则在后：

Options -MultiViews
RewriteEngine On
RewriteBase /b2b/

# 旧英文路径到土耳其语路径的301重定向
RewriteRule ^product-list$ urun-listesi [R=301,L]
RewriteRule ^home$ anasayfa [R=301,L]
RewriteRule ^account-prop$ firma-bilgileri [R=301,L]
RewriteRule ^account-statement$ hesap-ekstresi [R=301,L]
RewriteRule ^basket$ sepet [R=301,L]
RewriteRule ^cargo-info$ kargo-bilgisi [R=301,L]
RewriteRule ^cargo-detail$ kargo-detayi [R=301,L]
RewriteRule ^claim-for-refund$ iade-basvurusu [R=301,L]
RewriteRule ^compare-prods$ urunleri-karsilastir [R=301,L]
RewriteRule ^credit-card-commisions$ kredi-karti-komisyonlari [R=301,L]
RewriteRule ^cas$ cari-hesap-ekstresi [R=301,L]
RewriteRule ^e-payment$ e-odeme [R=301,L]

# 单页应用路由Fallback：所有非文件/非目录的请求转发到index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]

关键配置说明 #

1. 规则顺序：301重定向规则必须放在fallback规则之前，否则重定向逻辑不会触发。
2. Fallback规则：RewriteCond %{REQUEST_FILENAME} !-f和!-d确保仅当请求不是真实文件或目录时，才转发到index.html，避免影响CSS、JS、图片等静态资源的正常加载。
3. 静态资源路径修正：由于应用部署在/b2b/子目录下，需在项目package.json中添加以下配置，让Create React App生成正确的静态资源路径：

   "homepage": "/b2b/"
   

React Router配置验证 #

确保你的React Router v6路由已更新为土耳其语路径，示例如下：

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/anasayfa" element={<Home />} />
      <Route path="/urun-listesi" element={<ProductList />} />
      {/* 其余土耳其语路由配置 */}
    </Routes>
  );
}

内容的提问来源于stack exchange，提问作者Mustafa Can Demir