Dynamic routing settings in vercel.json for React Js application?

Question

How to setup dynamic routing for react application in Vercel deployment ?

Suppose if we have multiple paths in a ecommerce application ( "/", "/cart", "detail/:id", "/product", "/about", "/contact" or any other ) then how can i set up routing in this case on Vercel deployment ?

<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

To solve this issue you can create a vercel.json file in root folder of your application & configure like this :

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

After configuration deploy again your application on vercel. Support if find this helpfull.