Question

我有一个使用React Router的反应单页面应用程序，并使用Link定义路径，如下所示：

 <Link to="second" className="level-2" params={{id:item.content}} title={item.name}>{item.name}<br/></Link>

这会将/ myapp / firsturi中的网址更改为/ myapp / seconduri

我是否可以使用vanilla JS进行相同的反应路由器操作？我尝试使用history.pushState（）和history.replaceState（），但是当url更新正确时，页面上的内容却没有。我可以使用window.location.href =“/ myapp / seconduri”获得同样的东西，但这会导致页面刷新，这不是我想要的。

知道如何解决这个问题吗？

Answer 1

React Router依靠history模块来处理位置。当页面加载时，它会解析初始URL，这就是设置window.location.href的原因。

您使用的历史记录包含一个listen函数，React Router用它来监听位置更改。当一个发生时，它将触发新位置与您的路线的重新匹配，这反过来将呈现正确的组件。

手动调用pushState / replaceState不会触发侦听功能，这就是您的应用无法更新的原因。相反，您应该将历史记录实例用于navigate。

Answer 2

这对我有用：

// simulate navigation to where you want to be (changes URL but doesn't navigate)
window.history.pushState("","","/url");
// simulate navigation again so that
window.history.pushState("","","/url");
// when you simulate back, the router tries to get BACK to "/url"
window.history.go(-1);

我尝试的所有其他操作只是迫使DOM重新加载，就像单击链接一样。

从vanilla JS调用React路由器

2 个答案: