React路由问题：嵌套不存在路由跳转错误页CSS失效

现有配置无效的原因 #

1. CSS资源路径错误 #

这是核心问题：如果ErrorPage的CSS使用了相对路径（比如./styles.css），不同访问路径下浏览器的资源请求路径会出现偏差：

• 访问/notapath时，重定向到/errorpage，浏览器会从根目录请求CSS文件（比如/styles.css），能正常加载；
• 访问/123/123时，若用<Route path="/*" component={ErrorPage}/>，URL保持/123/123，浏览器会尝试从/123/styles.css加载CSS，而实际文件在根目录，导致资源404、样式丢失；
• 若用<Redirect to="/errorpage"/>但未触发跳转（比如前面有前缀匹配的路由），URL仍为/123/123，同样会出现CSS路径错误。

2. 路由匹配顺序/规则问题 #

React Router按路由定义顺序匹配，以下情况会导致404路由失效：

• 404路由（path="*"或Redirect）放在了其他正常路由前面，会提前拦截所有请求，导致正常路由无法访问；
• 前面存在不带exact属性的前缀路由（比如/:parentId），这类路由会匹配所有以/xxx开头的路径（包括/xxx/yyy），优先触发该路由，不会走到404处理逻辑。

解决方案 #

一、修复CSS资源路径 #

先解决路径问题，彻底避免样式加载失败：

• 使用绝对路径：将CSS引用改为以/开头，比如<link rel="stylesheet" href="/css/error-page.css">（假设CSS文件在public/css目录下）；
• 在public/index.html中使用%PUBLIC_URL%：<link rel="stylesheet" href="%PUBLIC_URL%/css/error-page.css">，自动适配项目根路径，适合不同部署环境；
• 使用CSS Modules或CSS-in-JS（如Styled Components）：样式会打包到JS中，完全规避路径问题，是React项目的推荐方案。

二、正确配置404路由 #

根据React Router版本调整配置，确保404路由最后执行：

React Router v5及以下

// 先定义所有正常路由，注意给需要精确匹配的路由添加exact属性
<Route exact path="/" component={HomePage} />
<Route path="/users" component={UsersPage} />
<Route path="/products/:id" component={ProductDetail} />

// 错误页路由
<Route path="/errorpage" component={ErrorPage} />

// 最后定义404处理：直接渲染ErrorPage（无需跳转URL）
<Route path="*" component={ErrorPage} />
// 或者重定向到错误页（需要改变URL时使用）
// <Redirect to="/errorpage" />

注意：如果有动态前缀路由（如/:parentId），务必添加exact属性，否则会拦截所有嵌套路径请求。

React Router v6+

v6版本路由默认精确匹配，使用element属性替代component：

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

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="/users" element={<UsersPage />} />
  <Route path="/products/:id" element={<ProductDetail />} />
  <Route path="/errorpage" element={<ErrorPage />} />
  
  // 404处理：直接渲染错误页
  <Route path="*" element={<ErrorPage />} />
  // 或者重定向到错误页
  // <Route path="*" element={<Navigate to="/errorpage" />} />
</Routes>

三、服务器配置（仅针对BrowserRouter） #

如果使用BrowserRouter，部署时需要配置服务器将所有请求转发到index.html，否则刷新嵌套路径会返回404：

• Nginx：在server块中添加try_files $uri $uri/ /index.html;
• Apache：创建.htaccess文件，添加RewriteRule ^ index.html [L]

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