React-Router Link 变量未转换为值

Question

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

我正在使用 react-router 4.3.1

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

我尝试了各种方法，但基本上，无论我尝试什么，我都无法让${} 工作。我试图用谷歌搜索这个问题，但没有找到有类似问题的人。 我已经阅读了许多关于如何使用 react-router 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