React项目部署后react-router-dom路由404问题求助

你遇到的404是因为BrowserRouter依赖前端路由机制，但服务器默认会把每个路由请求当成静态文件去查找；再加上你用原生<a>标签跳转，会触发浏览器硬刷新，服务器找不到对应文件就返回404。而你加的errorElement仅处理组件渲染时的错误，不处理服务器返回的404，所以无效。

1. 替换原生<a>标签为react-router-dom的Link组件 #

原生<a>标签会触发页面硬刷新，改用Link组件能实现前端路由跳转，不会向服务器发送新请求。

修改页面链接代码：

// 先在文件顶部导入Link
import { Link } from 'react-router-dom';

// 替换所有<a>标签为<Link>，href属性改为to
<span className='footer-sitemap'>
  <Link to='/Company/AboutUs' className='text-reset'>
   About Us
  </Link>
</span>
<span className='footer-sitemap'>
  <Link to='/Company/TermsOfService' className='text-reset'>
   Terms of Service
  </Link>
</span>
<span className='footer-sitemap'>
  <Link to='/Company/PrivacyPolicy' className='text-reset'>
   Privacy Policy
  </Link>
</span>
<span className='footer-sitemap'>
  <Link to='/Company/Advertising' className='text-reset'>
   Advertising
  </Link>
</span>
<span className='footer-sitemap'>
  <Link to='/Company/ContactUs' className='text-reset'>
   Contact Us
  </Link>
</span>

2. 配置服务器重写规则 #

即使换成Link，用户直接在地址栏输入子路由或刷新页面时，仍会触发服务器请求。必须让服务器把所有路由请求都转发到index.html（SPA的唯一入口）。以下是常见服务器的配置：

Nginx #

找到你的Nginx配置文件，在server块内添加：

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

Apache #

在项目根目录创建.htaccess文件，写入：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Netlify #

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

/*    /index.html   200

Vercel #

在项目根目录创建vercel.json文件，写入：

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

3. 修正errorElement的用法 #

你当前把errorElement加在单个路由上，它仅处理该路由组件渲染时抛出的错误。要处理前端路由的404，需添加全局匹配的404路由：

修改路由配置代码：

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/Company/AboutUs" element={<Aboutus />} />
  <Route path="/Company/TermsOfService" element={<Terms />} />
  <Route path="/Company/PrivacyPolicy" element={<Privacypolicy />} />
  <Route path="/Company/Advertising" element={<Advertising />} />
  <Route path="/Company/ContactUs" element={<Contactus />} />
  {/* 全局404路由，匹配所有未定义的前端路径 */}
  <Route path="*" element={<NotFound />} />
</Routes>

这样用户访问不存在的前端路由时，会显示自定义的NotFound组件，而非服务器返回的404页面。

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