如何在React Router Link组件内部添加动态代码

Question

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

我正在尝试这样做：

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

目前这行不通，结果HTML在href属性中包含{{user.id}}，因此无法解析。

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

Answer 1

做这样的事情：

let userId = {user.id}

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

注意：这些是反引号，而不是单引号。 如果您不想使用ES6，则可以执行以下操作：

var userId = {user.id}

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

Answer 2

下面应该工作：

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