React JavaScript中使用 navlink 怎么传递 id ？

在React中，特别是当使用react-router-dom库时，NavLink 是一种特殊类型的组件，用于在应用程序中导航到不同的路由。若要通过 NavLink 传递一个 id 或其他参数，通常有几种方法可以实现，如下所示：

方法一：使用动态路由

你可以在设置路由时使用动态路径参数。例如，假设你有一个用户详情页，你想通过点击一个链接传递用户的ID。

javascript
// 首先在你的路由配置中设置动态路由
<Route path="/user/:id" component={UserDetail} />

// 然后使用 NavLink 并传递参数
<NavLink to={`/user/${userId}`}>查看用户</NavLink>

这里，userId 是你想传递的参数，UserDetail 组件可以通过 match.params.id 接收这个参数。

方法二：使用状态 (state)

另一种方法是使用 NavLink 的 state 属性来传递复杂的状态信息。这是一个不那么常见但有用的特性，可以传递不仅仅是ID，还可以传递其他更复杂的数据结构。

javascript
<NavLink to={{
  pathname: '/user',
  search: `?id=${userId}`,  // 你也可以选择通过查询参数传递
  state: { id: userId }
}}>
  查看用户
</NavLink>

在目标组件中，你可以通过 location.state.id 来访问这个ID。

示例

假设我们有一个用于显示用户列表的组件，每个用户名称旁边都有一个链接，点击该链接将带你到该用户的详细信息页面。下面是如何使用 NavLink 并传递用户ID的一个简单示例：

javascript
import React from 'react';
import { NavLink } from 'react-router-dom';

function UserList({ users }) {
  return (
    <div>
      <h2>用户列表</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.name} - <NavLink to={`/user/${user.id}`}>查看详情</NavLink>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

在这个例子中，每个用户的详情链接都是动态生成的，user.id 用来创建每个特定用户的详细页面的路由。

通过这些方法，NavLink 组件可以非常灵活地用于各种不同场景的路由导航，同时传递所需的数据。