React Js 应用程序的 vercel.json 中的动态路由设置？

Question

如何在 Vercel 部署中为 React 应用程序设置动态路由？

假设如果我们在电子商务应用程序中有多个路径（

"/"

、

"/cart"

、

"detail/:id"

、

"/product"

、

"/about"

、

"/contact

”或任何其他）那么在这种情况下我如何设置路由Vercel 部署？

<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>

Answer 1

要解决此问题，您可以在应用程序的根文件夹中创建一个

vercel.json

文件并进行如下配置：

{
    "routes": [
      { "src": "/", "dest": "/" },
      { "src": "/product", "dest": "/" },
      { "src": "/about", "dest": "/" },
      { "src": "/contact", "dest": "/" },
      { "src": "/detail/(.*)", "dest": "/" },
      { "src": "/cart", "dest": "/" }
    ]
 }

配置后，在 vercel 上再次部署您的应用程序。如果觉得有帮助就支持一下。