Reactjs 如何在React路由器链接组件中添加动态代码

我希望能够在Link组件中添加一些动态代码

我正在尝试这样做：

<Link to="/users/{{user.id}}/locations" className="nav-link">Locations</Link>

位置

这目前不起作用，生成的HTML在href属性中包含{{user.id}，因此无法对其进行解析

---

我试过单花括号和双花括号，没有效果。

这样做：

let userId = {user.id}

<Link to={`/users/${userId}/locations`} className="nav-link">Locations</Link>

let userId={user.id}
位置

注意：这些是回勾，不是单一的报价。如果不想使用ES6，可以执行以下操作：

var userId = {user.id}

<Link to={ "/users/" + userId + "/locations" } className="nav-link">Locations</Link>

var userId={user.id}
位置

下面的方法应该有效：

<Link to={`/users/${user.id}/locations`} className="nav-link">Locations</Link>

位置

您应该使用es6字符串模板。因此，它将类似于下面的

/users/${user.id}/locations

使用反勾号。有关更多详细信息，请参阅os ES6 string templates@MohitTilwani，如果我这样做，我会收到此错误

SyntaxError:JSX值应该是表达式或引用的JSX文本（119:59）

my bad。您必须将它括在一个大括号中{

/users/${user.id}/locations

}大括号之间的所有内容都应该在后面勾选当我做反勾选时，我得到这个错误

SyntaxError:JSX值应该是表达式或引用的JSX文本