如何使用查询字符串渲染组件React-Router

Question

CodeSandbox-https://codesandbox.io/s/1y9z905x2l

我正在尝试使用react-router呈现组件，但是我不正确地理解如何使用查询字符串。因此条件—如果?tbm=first⟹将呈现第一个组件，依此类推。该怎么做？

示例：

Answer 1

查询字符串将在您呈现的组件内this.props.location.search内可用。因此，您的想法是您需要有一个父组件，该组件会被渲染成类似这样的形式。

<Route path="/" component={parentComponent} />

现在，您输入的任何查询字符串都将可用，并且您可以看到，如果您打开了自己的react dev工具。一旦有了此字符串，就可以对其进行解析，并根据您的自定义条件创建动态路由。 签出图片以供参考。

Answer 2

不同的查询字符串不会形成不同的路径。在您的示例中，路径始终是相同的，即/search，因此路由无法区分您的组件。

如果您将代码修改为具有三个实际路径（/first，/second和/third）并相应地修改链接，那么您的代码将按预期工作，请参见{{3} }

如果要打开查询字符串，则必须坚持使用路径为/search的单个Route并根据已解析的查询字符串显示组件对象，请参见https://codesandbox.io/s/3xqq1r06jq