React-router-dom: History.push concatenates path and doesn't reroute the app

Question

I have a popOver that contains a bunch of links:

This is the code implementing it:

   <PopoverBody>
                    <div>
                      {heart_users_profile_handles.map((heart_user) => (
                        <div>
                          <Link
                            onClick={() => {
                              this.props.history.push(
                                `profile/${heart_user.handle}`
                              );
                            }}
                          >
                            <small>{heart_user.handle}</small>
                          </Link>
                          <br />
                        </div>
                      ))}
                    </div>
                  </PopoverBody>
          

The problem is that when a user clicks on one of those links, instead of getting rerouted to them, they just get concatenated on the browser URL, and nothing happens:

The URL is originally like this:

http://localhost:3000/profile/HamadiAgerbi

After clicking once on the first link, this happens:

http://localhost:3000/profile/profile/AhmedGhrib

After I click on the second link this happens:

http://localhost:3000/profile/profile/profile/BarchaHob0

And so on and so forth.

Any idea what's causing this?

Answer 1

change code .profile/${heart_user.handle} to /profile/${heart_user.handle}

<PopoverBody>
                    <div>
                      {heart_users_profile_handles.map((heart_user) => (
                        <div>
                          <Link to={`/profile/${heart_user.handle}`} >
                            <small>{heart_user.handle}</small>
                          </Link>
                          <br />
                        </div>
                      ))}
                    </div>
                  </PopoverBody>