React-router-dom：History.push 连接路径并且不会重新路由应用程序答案

【问题标题】：React-router-dom: History.push concatenates path and doesn't reroute the appReact-router-dom：History.push 连接路径并且不会重新路由应用程序
【发布时间】：2021-02-07 18:11:43
【问题描述】：

我有一个包含一堆链接的 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

等等等等。

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

【问题讨论】：

两件事——你为什么使用history.push？你不能只使用链接吗？这将允许您仍然使用映射，但会解决我认为的问题。其次，你的 React Router 路由是什么样的（假设你正在使用）？

标签： javascript reactjs react-router react-router-dom reactstrap

【解决方案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>

【讨论】：

它停止连接它。但是，仍然没有任何反应。应用不会重新路由。
更改``` /profile/${heart_user.handle}}>{heart_user.handle} ```
更新了测试答案。如果仍然有问题。将您的示例代码放入codesandbox.进行调试。