如何在页面中动态显示路由参数

Question

我是React.js的新手，目前正在从事电子商务项目。 只需在产品页面中，当用户单击product-1链接时，我想动态显示一些带有product-1标题的信息。

Answer 1

我相信您想问的是路由参数，而不是查询字符串。因为route参数将带您要显示的页面（或组件）。但是顾名思义就是“查询字符串”；查询该页面内的数据 可以说您的代码中包含以下内容：（下次共享一些代码）

<Route path="/products/:id" component={ProductDetails} />

Route组件本质上是组件的包装，并将“ History，Location和Match”道具注入组件，并且如果您安装了React-Developer-Tools扩展，则可以看到它们。这3个道具会存储有关您路线的所有信息。

因此，在Match对象内部，有“ params”对象，在params内部有“ id”属性。因此，您想到达此处并显示在页面中。 在您的ProductDetails组件中，您可以编写如下内容：

render() {
    return (
      <div>
        <h1>Product Details -{this.props.match.params.id} </h1>
      </div>
    );
  }

由于额外的信息不会伤害任何人，因此这里介绍了如何访问查询字符串。 查询字符串作为“搜索”属性存储在“位置”对象中。您可以访问：

{this.props.location.search}