React router make middle part url "movable"

user_1891446 0
Viewed 18

I have possible urls in browser:

/en/shop/hiper-product-name-12344
/en/shop
/en/basket/shop/hiper-product-name-12344
/en/blog/title-article
/en/basket/blog/title-article

I want to make basket movable, optinal in middle url? I'm using react-router-dom-v6

<BrowserRouter>
   <Routers>
      <Route path="/:lang" element={<App />}>
         <Route path="/shop" element={...}>
            <Route path="/:product" element={...}>
            </Route>
         </Route>
         <Route path="/blog" element={...}>
            <Route path="/:article" element={...}>
            </Route>
         </Route>
      </Route>
   </Routers>
</BrowserRouter>

I think to add route component in "lang" and add path like "basket or null", but how inform about his Route?

react-router-dom react-router reactjs javascript
1 Answers

If you want to add & handle "optional" route path params you will need to explicitly define a route and path for them.

Example:

<BrowserRouter>
  <Routes>
    <Route path="/:lang" element={<App />}>
      <Route path="/shop" element={...}>
        <Route index element={...} />
        <Route path="/:product" element={...} />
      </Route>
      <Route path="/blog" element={...}>
        <Route path="/:article" element={...} />
      </Route>
      <Route path="/basket">
        <Route index element={...} />              // "/:lang/basket"
        <Route path="/shop" element={...}>         // "/:lang/basket/shop"
          <Route path="/:product" element={...} /> // "/:lang/basket/shop/:product"
        </Route>
        <Route path="/blog" element={...}>         // "/:lang/basket/blog"
          <Route path="/:article" element={...} /> // "/:lang/basket/blog/:article"
        </Route>
      </Route>
    </Route>
  </Routes>
</BrowserRouter>
user_86908570
Related