React路由重定向本地正常，部署到Vercel后出现404错误

这种本地跑起来完全正常，一部署到Vercel就出问题的情况真的很闹心，我帮你梳理几个最可能的原因和对应的解决办法：

• 检查路由跳转的方式是否正确
  如果你是用普通的 <a> 标签或者 window.location.href 来实现跳转的，那问题大概率出在这儿！React是单页应用，客户端路由得用React Router提供的工具来处理——比如 <Link> 组件或者 useNavigate 钩子。举个例子：
  错误写法：

  <a href={`/profile/${id}`}>去个人主页</a>
  

  正确写法（用Link）：

  import { Link } from 'react-router-dom';
  <Link to={`/profile/${id}`}>去个人主页</Link>
  

  或者用useNavigate：

  import { useNavigate } from 'react-router-dom';
  const navigate = useNavigate();
  const handleRedirect = () => {
    navigate(`/profile/${id}`);
  };
  

  用这些方式跳转才会触发客户端路由，不会让Vercel服务器去请求不存在的静态文件。

• 配置Vercel的重写规则
  即使你用了正确的客户端路由，Vercel默认的静态站点配置可能还是会导致子路由跳转时返回404。这时候需要在项目根目录创建一个 vercel.json 文件，添加重写规则，让所有请求都指向React的入口文件 index.html：

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

  这个配置会告诉Vercel不管请求哪个路由，都把内容转发给React应用，让客户端路由来处理匹配逻辑。

• 确认路由参数的正确性
  你可以在跳转前加个 console.log(id) 看看部署后获取到的id值是否正确——有没有可能在生产环境下id为空或者格式不对，导致跳转到 /profile/undefined 这种无效路由？毕竟你提到这个id还要传给Firebase，参数错误也可能间接导致404问题。

备注：内容来源于stack exchange，提问作者ShashidharM