Question

React应用具有搜索页面。有输入。路径为“ search /：query”，默认情况下，您会看到零结果。如果您转到“搜索/星级％20wars”，则会看到一些结果。在componentDidMount()中，我添加了if语句以在 match.params.query 不为空的情况下加载结果。

如果我输入搜索输入 Spider Man ，然后单击提交-我将触发搜索并显示结果。但是，如果您重新加载页面-您将看到有关星球大战的结果。那么如何更新match.params.query？或者可能有解决此问题的其他解决方案。

Answer 1

基本上，您应该在用户单击“提交”按钮时更改路线。

//使用ES6模块从“反应路由器”导入{历史}

您可以使用历史记录的推送功能。

query = 'Star Wars'
history.push('search/' + query);

Answer 2

@ misha-from-lviv 我看到您的问题陈述的方式是，查询参数有两个事实来源，您应使用它们来更新状态，另一个是默认状态，从您的过滤器的默认值开始填充。

按照 @Akash Bhandwalkar 的建议，您确实需要使用History API更新路线。但是，您还需要一个用于应用程序状态的顶级协调器，该顶级协调器将允许您读取和写入历史记录api（更改路由），并为您执行XHR / fetch以获取结果。

我将如何处理这个问题，是从父组件（即FiltersContainer）开始，该组件实际上是进行编排以读取和写入URL的。此Container将具有获取和更新路线的所有副作用知识（包括错误处理）。现在所有的子组件（可能是过滤器和搜索结果）都将读取如此编排的状态并重新渲染。

希望这可以指导您的思考。如果需要进一步的指导，请在此处还原。

干杯！

Answer 3

您还需要更新历史记录对象。

您正在做的是更改可用的历史记录对象并根据该对象计算结果。但是，当您刷新页面时，它仍然保留原始历史记录对象。

一种实现方式，您需要推送或替换历史记录中的新路线。

因为evert搜索页面是一个新页面，所以如果您希望保留以前的页面，则应使用history.push，否则请使用history.replace

像这样实现它：

var routeObj = {
pathname: samePath,
state: sameState,
query: newQuery
}
//push it in your history using which ever routing library you are using.

//For Example: 
router.history.replace(routeObj);

注意：不必担心更改历史记录时的渲染速度。 React足够聪明，可以解决这个问题。基本上，只要您推入已安装组件的路线，它都不会卸载并再次重新安装相同的组件，而是会更改道具并重新渲染它。这种情况的回调将是=> componentWillReceiveProps

如何更新match.params？

3 个答案: