[英]How to add dynamic code inside of a React Router Link component
I want to be able to add some dynamic code inside of the Link component. 我希望能够在Link组件内添加一些动态代码。
I am trying to do this: 我正在尝试这样做:
<Link to="/users/{{user.id}}/locations" className="nav-link">Locations</Link>
This currently doesn't work, the resulting HTML contains the {{user.id}} in the href attribute, so it isn't getting parsed. 目前这行不通,结果HTML在href属性中包含{{user.id}},因此无法解析。
I have tried single and double curly braces, no effect. 我尝试过单双花括号,没有效果。
Do something like this: 做这样的事情:
let userId = {user.id}
<Link to={`/users/${userId}/locations`} className="nav-link">Locations</Link>
Note: those are backticks, not single quotations. 注意:这些是反引号,而不是单引号。 If you don't want to use ES6, you can do something like the following: 如果您不想使用ES6,则可以执行以下操作:
var userId = {user.id}
<Link to={ "/users/" + userId + "/locations" } className="nav-link">Locations</Link>
下面应该工作:
<Link to={`/users/${user.id}/locations`} className="nav-link">Locations</Link>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.