javascript - 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 上连接起来，并且什么也没有发生：

URL原来是这样的：

http://localhost:3000/profile/HamadiAgerbi

单击第一个链接后，会发生这种情况：

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

在我点击第二个链接后，会发生这种情况：

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

等等等等。

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

标签： javascriptreactjsreact-routerreact-router-domreactstrap

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>