我应该在React Router之外的URL中添加参数吗？

Question

我正在使用React Router v4，并且我的页面上有一些组件。

1. 过滤区域
2. 结果区域
3. 广告

现在，当用户选中一个复选框（即Ford）时，结果区域应填充具有Ford制造商的结果。

我有一个要求，就是我应该能够复制该网址，然后将其粘贴到新标签中，并且应该显示相同的结果。

我当然要做很多其他人都要做的事情，并将条件添加到网址中

/results?manufacturer=Ford

我打算用React Router来做到这一点

this.props.history.replace(path)

但是这似乎会导致页面（包括ComponentsDidMount）的重新渲染，我想知道在React Router外部更改url以阻止此重新渲染是否会更有效。

我必须重新渲染任何一种方式，因为当他们选中一个复选框时状态会发生变化。

但是，我想知道是否要执行反应路由器方式，是否引起更多的渲染需求（即，所有ComponentsDidMount都将重新启用，页面上的所有内容都可能像广告组件一样重新渲染？？ ？）从本质上来说，我似乎正在刷新页面。

编辑

我知道我想出了什么办法，我将不得不处理将URL中的内容复制到新的浏览器/选项卡中的任何内容，并且在加载时必须读取它。

我的问题现在是当我选中一个复选框时，似乎是在我的onChange处理程序中执行了这一行

this.props.history.replace(path)

页面完全刷新，这对我来说似乎效率很低。

我将尝试制作一个Codepen示例，但是我不确定如何设置所有库和内容以使该示例正常工作。

Answer 1

因此，只要复制URL并将其粘贴到新选项卡中，React Router便会自动退出窗口。

要保持结果，您可以：

1. 在构造函数中添加一个方法，以从URL中获取参数（如果存在），然后自动选中该框并添加结果。

2. 为React Router创建动态路由，以便您可以更轻松地从this.props.match.params抓取它，但是仍然需要在页面加载时处理它

动态路线要好很多，如果您不确定如何做，那么一个简单的例子就是：

1. 将您的路线定义为search/:manufacturer/results
2. 点击框，将您的历史记录更新为/search/ford/results
3. 检查您的this.props.match.params.manufacturer以获取价值

希望有帮助！

Answer 2

您可以使用以下之一。

this.props.history.push(`/search/ford/results`);

或者就像您所说的那样（因为将要选中），请根据该值执行以下操作：

this.props.history.push(`/search/${value}/results`);

您需要将复选框值传递给该值。即福特等。

我希望这对您有用。