修改当前 URL（Gatsby / Reach Router）答案

【问题标题】：Modify current URL (Gatsby / Reach Router)修改当前 URL（Gatsby / Reach Router）
【发布时间】：2019-07-13 19:28:59
【问题描述】：

问题：是否可以修改浏览器地址栏和浏览器历史记录中显示的当前 URL？

具体来说，我只是想修改用户可见的URL；我不想触发导航。（我有一个 Gatsby 应用，而 Gatsby 正在使用 Reach Router。）

动机：我有一个图片库，用户可以点击并导航到 URL，例如 /images/?id=52。这种方法的优点是可以预取/images/ 以启用页面的即时呈现。但是，这种方案对禁用 JS 的用户不友好，因为他们在使用查询参数导航时根本看不到任何图像。所以我也预渲染了像/images/52/ 这样没有JS 的页面。所以我想做的是使用查询参数导航 JS 用户，然后将他们看到的 URL 修改为可以与包括非 JS 用户在内的任何人共享的 URL。

【问题讨论】：

我认为你不能/不应该尝试打破浏览器 url 和 SPA 路由之间的联系。更好地使 js 路由在没有查询参数 imo 的情况下工作。
在不使用查询参数的情况下似乎无法获得图像页面的即时渲染（因为您必须为每个图像预取不同的路由，而不是单个路由）。

标签： javascript gatsby reach-router

【解决方案1】：

我认为您正在寻找的是 window.location.replace() 或 window.location.assign()

替换只是视觉上的，因此如果用户要复制 URL 以与他们的朋友分享，您可以操纵他们看到和复制的 URL。

Assign 加载一个新文档，就好像您传递给它的 URL 是获取该文档的那个一样。

https://developer.mozilla.org/en-US/docs/Web/API/Location/replace

https://developer.mozilla.org/en-US/docs/Web/API/Location/assign

编辑：比较

Difference between window.location.assign() and window.location.replace()

【讨论】：

【解决方案2】：

我相信您需要创建一个 NodeJs 服务器来处理此类操作。它可以从 URL ('images/?id=52') 中获取一个查询参数，然后将用户返回到 URL 'images/52'。

或者您可以使用“gatsby-source-filesystem”包。

【讨论】：