React Router Link变量未转换为值

Question

我使用的是react router Link组件，该组件使用/customers/${id}传递变量。链接导航到正确的组件，但它没有将$｛id｝转换为其值，而是将其作为文本传递，如下所示："/customers/$%7Bid%7D"。

我使用的是react路由器4.3.1

我正在学习React，并正在创建一个简单的主/细节网络应用程序。我已经成功地从我的API中检索数据，并将其呈现为列表。我希望能够单击列表中的项目，并导航到将唯一ID作为参数传递的详细信息组件。

我尝试过各种各样的东西，但基本上，无论我尝试什么，我都无法让${}发挥作用。我试过用谷歌搜索这个问题，但没有发现有类似问题的人。我已经阅读了许多关于如何使用react路由器v4设置路由的文章，并正在关注这些文章，但遇到了这个问题。

如果我尝试手动传递链接，那么路线运行良好，并且它会正确导航到呈现特定客户的详细信息组件。

<Link to={'/customers/${this.props.item.Id}'}>{this.props.item.Name}</Link>

路线如下：

<Route path='/customers/:Id' component={CustomerDetails} />

我希望链接生成以下URL:/customers/3，但实际结果是/customers/%7Bthis.props.item.Id%7D变量名称拼写正确。

Answer 1

您应该使用反勾号进行字符串模板化。

代替：

'/customers/${this.props.item.Id}'

使用这个：

`/customers/${this.props.item.Id}`

在此处阅读有关模板文字的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals