react-router doesn't send me to the right component

0
votes

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>
1
javascriptreactjsroutesreact-router
Doesn't the literal route need to go before the variable route? Otherwise, shop and checkout could be read as parameters? – stephancasas

1 Answers

1
votes

It's becayse 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>