React link is adding characters to my url

December 31, 2021

I want to redirect to a totally different url with my Link component (from react-router-dom), but instead, it just adds those characters to my current url.
For example, if I click this Link being on "http://localhost:3000/pin-detail/5HHceZ3LuAltt4AEKn2LYc"

<Link to={`user-profile/${pinDetail.postedBy?._id}`} className='flex gap-2 m5-5 items-center bg-white dark:bg-darkg rounded-lg mt-2'>
                    <img src={pinDetail.postedBy?.image} alt="user-profile" className='w-8 h-8 rounded-full object-cover' />
                    <p className='font-semibold capitalize dark:text-white'>{pinDetail.postedBy?.userName}</p>
 </Link>

It goes to "http://localhost:3000/pin-detail/5HHceZ3LuAltt4AEKn2LYc/user-profile/104293279805278412025". I want that the link redirects me to "localhost:3000/user-profile/${pinDetail.postedBy?._id".
How can I do that?

>Solution :

You need to add a / before as saied on comment by Matt, like this

<Link to={`/user-profile/${pinDetail.postedBy?._id}`} className='flex gap-2 m5-5 items-center bg-white dark:bg-darkg rounded-lg mt-2'>
                    <img src={pinDetail.postedBy?.image} alt="user-profile" className='w-8 h-8 rounded-full object-cover' />
                    <p className='font-semibold capitalize dark:text-white'>{pinDetail.postedBy?.userName}</p>
 </Link>