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