The routes stacks up on each other

user_10798040 0
Viewed 43

I am working with Material UI and I am using Link component prop to define the routes . I have multiple routes like

/home 
/contact
/login

But when I am clicking on /home then /contact so it goes to /home/contact instead of /contact . How can I fix this issue so my page goes to /contact instead of stacking up on previous route .

gatsby material-ui reactjs
1 Answers

Your issue is caused by a missing forward slash (/) at the beginning of your link's component slug.

Your Link component should be:

<Link to="/contact">

Instead of

<Link to="contact">

Assuming a dynamic link generation add it as template literal:

<Link to={`/${someSlugVariable}`}>

This behavior (the concatenation of slugs) is expected when dealing with partials/relative URLs, it works, in the same way, using anchors (<a>) that it's output in the end.

user_55853710
Related