React router 4 - 使用哈希路由架构问题

Question

我的设置

我在我的应用程序中使用了 React router 4，并试图实现一些类似的东西，即向页面上的某些路由添加哈希，这将保存页面的状态，以便用户可以 link 说状态。

例如 - 我列出的产品有很多变体，当用户选择一个变体时，我将哈希 + 变体 ID 添加到 URL，就像 myapp.com/cars/truck转向 myapp.com/cars/truck#red，这允许用户 link 到那个特定的变体，这就是我想要的。

我的问题

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

用户登陆首页myapp.com/
导航到 myapp.com/cars/truck
然后选择红色变体 => myapp.com/cars/truck#red,
然后是蓝色myapp.com/cars/truck#red => myapp.com/cars/truck#blue

当他们按下浏览器上的后退按钮时，他们将返回到 myapp.com/cars/truck#red，当他们返回到上一页时，他们想要的效果是省略变体和哈希更改，即 [=12] =].

我知道这是浏览器的行为，但我想知道是否有办法让用户 link 直接访问变体 links，并且也让用户在描述的场景后按下后退按钮返回上一页（在那个场景中是 myapp.com/）。也许重新考虑我是如何做的，我愿意接受任何建议。

如果有帮助，我正在为此使用 React (16) 和 React Router (v4)。如果需要，很乐意显示任何代码，请告诉我。感谢阅读！

Answer 1

尝试replaceState，它将更新URL而不添加历史条目：

history.replaceState() operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one. Note that this doesn't prevent the creation of a new entry in the global browser history.

例如

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

React router 4 - 使用哈希路由架构问题

React router 4 - routing questions on architecture using hashes

javascript

reactjs

react-router

react-router-v4