react-router路径匹配异常，访问/shop/checkout渲染ProjectPage如何解决

react-router 中的 Switch 组件会按照路由配置的从上到下顺序逐一匹配路径，命中第一个符合规则的路由后就会停止后续匹配，直接渲染对应组件。
你当前的配置将 /:current/:project 这个动态参数路由放在了 /shop/checkout 固定路由的前面，当你访问 /shop/checkout 路径时，系统会自动把 shop 识别为 :current 参数、checkout 识别为 :project 参数，所以会优先命中 ProjectPage 路由，不会走到后续的 CheckoutPage 规则。
另外你原本的 /:current/:project 规则范围过宽，所有两级结构的路径都会命中该规则，本身就不符合你仅为design组件设计的需求。

你可以二选一，也可以同时使用两种方案增强稳定性：

• 方案1：调整路由配置顺序，把所有固定路径的路由放在动态参数路由的前面，调整后代码如下：

<Switch location={location}>
  <Route exact path="/design" component={Design} />
  <Route exact path="/shop" component={Shop} />
  <Route exact path="/shop/checkout" component={CheckoutPage}/>
  <Route exact path="/:current/:project" component={ProjectPage}/>
</Switch>

• 方案2：收紧动态路由的匹配规则，因为该路由仅为design组件服务，你可以直接把动态路由的前缀写死为design，从根源上避免和shop相关路径冲突，调整后代码如下：

<Switch location={location}>
  <Route exact path="/design" component={Design} />
  <Route exact path="/shop" component={Shop} />
  <Route exact path="/shop/checkout" component={CheckoutPage}/>
  <Route exact path="/design/:project" component={ProjectPage}/>
</Switch>

该方案不影响你原有design页面的跳转逻辑，你之前写的 <Link to={${useLocation().pathname}/${title}} /> 跳转逻辑不需要做任何修改，因为useLocation()返回的/design拼接项目名后正好匹配 /design/:project 规则。

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