React应用部署到Vercel时如何配置动态路由？

当你的React电商应用（包含/、/cart、/detail/:id、/product、/about、/contact这些路由）部署到Vercel时，直接部署会出现刷新非根路径就404的问题——这是因为Vercel默认会去查找对应路径的静态文件，而单页应用的所有路由逻辑都由前端的React Router处理，只有一个index.html入口文件。

解决这个问题只需要添加Vercel的路由重写配置，具体步骤如下：

1. 创建vercel.json配置文件 #

在项目根目录新建vercel.json文件，写入以下内容：

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

这个配置会让Vercel将所有路径的请求都转发到index.html，交给你的React Router匹配对应的组件，包括动态路由/detail/:id也能正常解析。

2. 保持现有React Router代码不变 #

你提供的应用内路由代码已经正确定义了所有路径对应的组件，不需要做任何修改：

<Router>
      <Nav searchBtn={searchBtn} data={navbarData} />
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/product' element={<Product addToCart={addToCart} product={product} setProduct={setProduct} />} /> {/* detailHandler={detailHandler} */}
        <Route path='/about' element={<About />} />
        <Route path='/contact' element={<Contact />} />
        <Route path='/cart' element={<Cart cart={cart} setCart={setCart} />} />
        <Route path='/detail/:id' element={<Detail addToCart={addToCart} />} /> {/* data={detailData} */}
      </Routes>
      <Footer data={footerData} />
 </Router>

完成以上操作后重新部署到Vercel，所有路由（包括刷新动态路由页面）都能正常加载对应的组件，不会再出现404问题。

内容的提问来源于stack exchange，提问作者Shivʌm Singh Ʀathod