React-Router Link 变量未转换为值

Question

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

我正在使用 react-router 4.3.1

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

我已经尝试了各种方法，但基本上，无论我尝试什么，我都无法使 ${} 工作。我已经尝试 google 这个问题，但没有发现有类似问题的人。我已经阅读了许多关于如何使用 react-router v4 设置路由的文章，并且正在关注这些文章但遇到了这个问题。

如果我尝试手动传递 link 路由工作正常并且它正确导航到呈现特定客户的详细信息组件。

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

路线如下所示：

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

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

Answer 1

您应该为字符串模板使用反引号。

而不是：

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

使用这个：

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

React-Router Link variables not converted to values