如何在不重新加载页面的情况下显示修改 URL 后的内容？

Question

我正在修改 URL 而不使用重新加载页面 window.history.pushState("string", "title", "/new-url"); 但是当我尝试在新选项卡中访问新更改的 URL 时，内容没有显示，它会引发错误 Cannot GET /new-url。如何显示新网址中的内容？

Answer 1

根据 MDN docs，history.pushState 仅向浏览器的会话历史堆栈添加一个条目。它不会触发页面重新加载。

在传统的服务器端渲染应用中，URL 的每次更改都会触发向后端发送新页面的请求。

在当今的单页应用程序 (SPA) 中，浏览器路由器会根据 URL 在页面上显示不同的内容，而无需重新加载整个页面。如果您想使用 SPA 和浏览器路由器，我会推荐 React 库和 react-router-dom 作为浏览器路由器的示例。

由于我不确切知道您正在使用什么技术堆栈，因此我无法给您一个具体的答案，但是如果您尝试访问 someHost/new-url 并且服务器告诉您它没有存在，那么您需要在该 URL 上创建一个资源，然后才能尝试获取它。