Inside the Posts.js component which is in the "/home" route, I want a link to user profile so I use this code:

<Link to={`profile/${users.username}`}>

I want this link to go to "/profile/:username", but instead it goes to "/home/profile/:username".

How to fix that?

CodePudding user response：

Seems you are using react-router-dom v6, which can use relative links as well as absolute links. The difference between the two is a leading "/" character. Paths starting with "/" are absolute paths, and without will navigate relative to the current location. For example, if the current path is "/home" and you push a navigation to "profile/123" then the result is that you navigate to "/home/profile/123".

You can read a bit more about Relative Links. Relative links are useful when building nested routes/links/UI.

Use an absolute path.

<Link to={`/profile/${users.username}`}>