Question

我遇到了一个问题：

我访问一个URL，例如：

在我的页面中，我有一个数组。当我单击分页按钮以更改数组中的更改页面时，将调用我的功能changePage，更改URL以添加搜索查询，因为我使用setState（{page}），所以页面重新呈现，到目前为止效果很好。新网址：http://localhost:900/user?page=2（注意，路径名没有更改，我只是添加了搜索查询）

如果我再次单击下一页，则URL更改为http://localhost:900/user?page=3，然后重新呈现我的页面。太完美了。

现在，我按浏览器中的“后退”按钮，位置更改回http://localhost:900/user?page=2，但页面未重新呈现。

如果用户在浏览器中而不是在应用程序的最后一页上按后退按钮，如何重新呈现页面？

我用：
react：“ 16.3.2”，
react-dom：“ 16.3.2”，
react-redux：“ 5.0.7”，
react-router-dom：“ 4.2.2”，

编辑：当我在创建BrowserHistory之后使用监听功能，并且按上一个浏览器页面时：

const history = createBrowserHistory();
history.listen((location, action) => {
  // location is an object like window.location
  console.log(action, location.search);
});

location.search很好。

我的问题仅在于当我在同一页面中使用浏览器的箭头时。当我进入其他页面并返回该页面时，该URL很适合并且我的数组会重新加载好信息

Answer 1

您可以尝试监听'popstate'事件处理程序：

window.addEventListener("popstate", () => {
  // React state change logic
});

来自MDN：当活动历史记录条目更改时，将触发popstate事件。如果要激活的历史记录条目是通过调用history.pushState（）创建的，或者受调用history.replaceState（）的影响，则popstate事件的state属性包含历史记录条目的状态对象的副本。

Answer 2

在用于路由的功能上，您是否尝试过：this.props.history.push('/{yourNewUrl}')？

Answer 3

您需要在响应标头中放置适当的缓存控制标头-

cache-control: private, max-age=0, no-cache, no-store

URL查询更改后如何呈现页面

3 个答案: