React-router-dom：History.push 連接路徑並且不重新路由應用程序

Question

我有一個包含一堆鏈接的 popOver：

這是實現它的代碼：

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

問題在於，當用戶單擊這些鏈接之一時，它們不會被重新路由到這些鏈接，而是被連接到瀏覽器 URL 上，而沒有任何反應：

網址原來是這樣的：

http://localhost:3000/profile/HamadiAgerbi

在第一個鏈接上單擊一次后，會發生這種情況：

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

單擊第二個鏈接后，會發生這種情況：

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

等等等等。

知道是什么原因造成的嗎？

Answer 1

更改代碼。 profile/${heart_user.handle}到/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>