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

Posted 2023-03-23

【中文标题】React-router-dom：History.push 连接路径并且不会重新路由应用程序

【英文标题】：React-router-dom: History.push concatenates path and doesn't reroute the app

【发布时间】：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 路由是什么样的（假设你正在使用）？

【参考方案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.进行调试。