react-router 没有将我发送到正确的组件

Question

when i try to go to "shop/checkout/" i get the "/:current/:project" (i get ProjectPage and not CheckoutPage) what am I doing wrong? the "/:current" is coming from the design component.

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

      design page:
      <Link to={`${useLocation().pathname}/${title}`} />
      //useLocation = "/design", ${title} is a project name, im maping through projects and when the user click a project it uses the name of the project to the url

      shop:
      <Link to="/shop/checkout">CHECKOUT</Link>

Answer 1

It's because shop and checkout are read as parameters. Then it renders the ProjectPage component.

Just put the /shop/checkout route before your dynamic route with parameters.

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