React Router DOM v6 如何实现URL中basket路径可选可移动？

需要让basket成为URL中的可选中间路径，同时支持以下URL的匹配：

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

方案一：使用路由组复用子路由 #

这种方式适合需要复用相同子路由逻辑的场景，避免重复代码：

首先抽离共享的shop和blog路由组件：

import { Routes, Route } from 'react-router-dom';

const SharedShopBlogRoutes = () => (
  <>
    <Route path="shop" element={<ShopComponent />}>
      <Route path=":product" element={<ProductDetailComponent />} />
    </Route>
    <Route path="blog" element={<BlogComponent />}>
      <Route path=":article" element={<ArticleDetailComponent />} />
    </Route>
  </>
);

然后在主路由中同时配置带basket和不带basket的路径：

<BrowserRouter>
  <Routes>
    <Route path="/:lang" element={<App />}>
      {/* 匹配带basket的路径，比如/en/basket/shop */}
      <Route path="basket" element={<Outlet />}>
        <SharedShopBlogRoutes />
      </Route>
      {/* 匹配不带basket的路径，比如/en/shop */}
      <SharedShopBlogRoutes />
    </Route>
  </Routes>
</BrowserRouter>

方案二：使用可选路径段（React Router v6.4+） #

如果你的React Router版本是v6.4及以上，可以直接在路径中使用(...)语法定义可选的路径段，写法更简洁：

<BrowserRouter>
  <Routes>
    <Route path="/:lang" element={<App />}>
      {/* 同时匹配/en/shop 和 /en/basket/shop */}
      <Route path="(basket/)?shop" element={<ShopComponent />}>
        <Route path=":product" element={<ProductDetailComponent />} />
      </Route>
      {/* 同时匹配/en/blog 和 /en/basket/blog */}
      <Route path="(basket/)?blog" element={<BlogComponent />}>
        <Route path=":article" element={<ArticleDetailComponent />} />
      </Route>
    </Route>
  </Routes>
</BrowserRouter>

这里的(basket/)?表示该路径段是可选的，末尾的?标记整个组可以出现0次或1次，完美匹配带/不带basket的两种URL结构。

注意事项 #

• 方案二需要React Router v6.4及以上版本支持；
• 如果需要在组件中判断当前URL是否包含basket，可以通过useParams()或useLocation()获取路径信息进行判断。

内容的提问来源于stack exchange，提问作者Peter