部署React应用到Vercel后嵌套路由无法访问的问题

1. 检查PrivateRoute的实现 #

你的dashboard路由的element是<PrivateRoute />，React Router的嵌套路由要求父路由组件必须渲染<Outlet />来承载子路由内容。如果你的PrivateRoute没有包含这个组件，部署后子路由内容根本无法显示。

修改PrivateRoute组件，确保鉴权通过后返回<Outlet />：

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

const PrivateRoute = () => {
  const isAuthenticated = // 你的鉴权逻辑，比如检查localStorage或全局状态
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
};

export default PrivateRoute;

2. 确认vercel.json的配置和位置 #

• 确保vercel.json放在项目根目录（不是src文件夹内），Vercel只会读取根目录的配置文件。
• 可以尝试更明确的路由重写规则，优先覆盖dashboard下的所有嵌套路径：

{
  "rewrites": [
    {
      "source": "/dashboard/:path*",
      "destination": "/"
    },
    {
      "source": "/(.*)",
      "destination": "/"
    }
  ]
}

3. 修正导航链接的路径 #

在dashboard内部使用相对路径导航，避免绝对路径导致的拼接错误：

• 错误示例：<Link to="/dashboard/product/list">产品列表</Link>
• 正确示例：<Link to="product/list">产品列表</Link>（当前路径已为/dashboard，相对路径会自动拼接）

4. 强制清理缓存重新部署 #

Vercel可能缓存旧配置或代码，进入项目控制台的Deployments选项卡，选择最新部署并点击Redeploy，勾选Clear build cache后重新部署。

5. 验证路径大小写一致性 #

Vercel环境对路径大小写敏感，确保路由定义和实际导航的路径大小写完全匹配（比如/dashboard/Product和/dashboard/product会被视为不同路径）。

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