如何使用查询字符串渲染组件 React-Router
How to render components with query strings React-Router
代码沙盒 — codesandbox
我正在尝试使用 react-router 呈现组件，但我没有正确理解如何使用查询字符串。所以条件——如果 ?tbm=first ⟹ 它将渲染第一个组件，依此类推。如何做到这一点？
示例：
查询字符串将在呈现的组件内 this.props.location.search 内可用。所以这个想法是你需要有一个父组件，它被渲染成这样。
<Route path="/" component={parentComponent} />
现在，无论您输入什么作为查询字符串都将可用，如果您打开您的 React 开发工具，您可以看到。一旦你有了这个字符串，就可以解析它并根据你的自定义条件获得动态路由。
查看图片以供参考。
不同的查询字符串不会形成不同的路径。在您的示例中，路径始终相同，即 /search，因此路由无法区分您的组件。
如果您将代码修改为具有三个实际路径（/first、/second 和 /third）并相应地修改链接，那么您的代码将按预期工作，see
如果你想打开查询字符串，你必须坚持使用路径 /search 的单个路由，并根据解析的查询字符串显示你的组件对象，see
代码沙盒 — codesandbox
我正在尝试使用 react-router 呈现组件，但我没有正确理解如何使用查询字符串。所以条件——如果 ?tbm=first ⟹ 它将渲染第一个组件，依此类推。如何做到这一点？
示例：
查询字符串将在呈现的组件内 this.props.location.search 内可用。所以这个想法是你需要有一个父组件，它被渲染成这样。
<Route path="/" component={parentComponent} />
现在，无论您输入什么作为查询字符串都将可用，如果您打开您的 React 开发工具，您可以看到。一旦你有了这个字符串，就可以解析它并根据你的自定义条件获得动态路由。
查看图片以供参考。
不同的查询字符串不会形成不同的路径。在您的示例中，路径始终相同，即 /search，因此路由无法区分您的组件。
如果您将代码修改为具有三个实际路径（/first、/second 和 /third）并相应地修改链接，那么您的代码将按预期工作，see
如果你想打开查询字符串，你必须坚持使用路径 /search 的单个路由，并根据解析的查询字符串显示你的组件对象，see