如何在 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>