React router 4 - 使用哈希

Question

我的设置

我在我的应用程序中使用react router 4并尝试实现向页面上的某些路径添加哈希的行，这将保存页面的状态，以便用户可以链接到所述状态。

所以例如 - 我列出的产品有很多变种，当用户选择变体时，我会在网址中添加散列+变体ID，所以像myapp.com/cars/truck一样转向{{1} }，这允许用户链接到该特定变体，这就是我想要的。

我的问题

当用户导航到某个页面并选择一些变体，然后尝试向后导航时，我的问题就出现了。因为我更改了哈希值，所以每个后退步骤都会触及浏览器历史记录中的上一个变量。 所以，如果

1. 用户登陆主页myapp.com/cars/truck#red
2. 导航至myapp.com/
3. 然后选择红色变体=＆gt; myapp.com/cars/truck，
4. 然后蓝色myapp.com/cars/truck#red =＆gt; myapp.com/cars/truck#red

当他们按下浏览器上的后退按钮时，他们将返回myapp.com/cars/truck#blue，当他们想要的效果是他们回到上一页时省略变体和散列更改，这将是myapp.com/cars/truck#red

我理解这是浏览器行为，但我想知道的是，是否有办法让用户直接链接到变体链接，也让它按下后面的按钮描述的场景将用户带回到上一页（在该场景中它是myapp.com/）。也许重新思考我是如何做到这一点的，我对任何建议持开放态度。

如果有帮助，我正在使用react（16）并对路由器（v4）做出反应。如果需要，很高兴显示任何代码，请告诉我。谢谢你的阅读！

Answer 1

尝试replaceState，它会在不添加历史记录条目的情况下更新网址：

  

history.replaceState（）的运行方式与history.pushState（）完全相同   除了replaceState（）改为修改当前的历史条目   创建一个新的。请注意，这并不妨碍创建   全球浏览器历史记录中的新条目。

e.g。

history.replaceState(null, 'Red Truck', '/truck#red')