时间戳

首页 > 解决方案 > React-Router Link 变量未转换为值

reactjs - React-Router Link 变量未转换为值

问题描述

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

我正在使用反应路由器 4.3.1

我正在学习 React 并正在创建一个简单的主/详细 webapp。我已成功从我的 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 变量名称拼写正确。

标签： reactjsreact-router-v4

解决方案

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

代替：

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

用这个：

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

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

推荐阅读