在 URL 中查询更改后反应如何呈现页面答案

【问题标题】：React how to render page after query change in URL在 URL 中查询更改后反应如何呈现页面
【发布时间】：2018-11-12 12:51:07
【问题描述】：

我遇到了一个问题：

我访问一个 URL，例如：

http://localhost:900/user

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

如果我再次单击下一页，则 url 更改为 http://localhost:900/user?page=3 并且我的页面重新呈现。很完美。

现在，我在浏览器中按下后退按钮，位置变回http://localhost:900/user?page=2，但页面没有重新呈现。

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

我使用：
反应：“16.3.2”，
反应域：“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 很好，并且我的数组重新加载了良好的信息

【问题讨论】：

你在监听器中设置状态了吗？
当我单击表格的下一页按钮时，我调用函数 fetchDatas。在这个函数中，我为 fetchData 调用了一个动作，并使用了 setState。在 setState 回调中，我调用了其他使用 this.props.history.push('/{yourNewUrl}') 的函数
我创建了这个codesandbox.io/s/z226wn416m 并且Main 组件总是在查询字符串更改时重新呈现。看看那个。
谢谢，我将开始修改我的代码以尝试您的解决方案。我会及时通知您。
但是你的历史监听器应该改变你的组件的状态。浏览器的后退按钮不会调用组件中的任何状态更改。

标签： javascript reactjs

【解决方案1】：

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

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

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

【讨论】：

非常感谢你。我在 componentDidMount() 和 removeEventListener 上调用了这个函数，在 componentWillUnmount()

【解决方案2】：

关于你用来路由的功能，你试过了吗：this.props.history.push('/{yourNewUrl}')？

【讨论】：

是的，在我的函数中，我使用 this.props.history.push('/{yourNewUrl}') 这是因为当我在浏览器中按下 previuos 按钮时，我的 url 很好。但是我的页面没有重新渲染。

【解决方案3】：

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

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

【讨论】：