如何使用React router v6将参数传递到 link ？

在React Router v6中，将参数传递给<Link>组件可以通过几种方式实现。参数通常用于在不同页面或组件间传递信息，比如用户ID、商品信息等。以下是一些主要方法：

1. 使用路径参数 (Path Parameters)

路径参数是路由路径的一部分，通常用于标识资源，比如用户ID或商品ID。在设置路由时，你需要在路径中指定参数，然后在<Link>组件的to属性中填入具体的值。

示例代码：

javascript
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <h2>用户列表</h2>
        <ul>
          <li><Link to="/user/1">用户1</Link></li>
          <li><Link to="/user/2">用户2</Link></li>
        </ul>

        <Routes>
          <Route path="/user/:id" element={<User />} />
        </Routes>
      </div>
    </Router>
  );
}

function User() {
  // 使用 useParams 钩子来获取参数
  const { id } = useParams();
  return <div>用户ID: {id}</div>;
}

在这个例子中，<Link to="/user/1"> 将用户导航到 /user/1，这里的 1 是通过路径参数传递的。

2. 使用查询参数 (Query Parameters)

查询参数（也称为搜索参数）可以在URL的查询字符串中设置，并且可以在<Link>的to属性中直接编码。

示例代码：

javascript
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { useSearchParams } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <h2>产品列表</h2>
        <ul>
          <li><Link to="/product?name=手机">手机</Link></li>
          <li><Link to="/product?name=电脑">电脑</Link></li>
        </ul>

        <Routes>
          <Route path="/product" element={<Product />} />
        </Routes>
      </div>
    </Router>
  );
}

function Product() {
  // 使用 useSearchParams 钩子来获取查询参数
  const [searchParams] = useSearchParams();
  const name = searchParams.get('name');
  return <div>产品名称: {name}</div>;
}

在这个例子中，<Link to="/product?name=手机"> 通过查询参数传递了产品名称。

3. 使用状态 (State)

你还可以使用链接的状态（state）来传递更复杂的数据结构，如对象等。

示例代码：

javascript
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <h2>信息列表</h2>
        <ul>
          <li><Link to="/info" state={{ message: 'Hello World' }}>查看信息</Link></li>
        </ul>

        <Routes>
          <Route path="/info" element={<Info />} />
        </Routes>
      </div>
    </Router>
  );
}

function Info() {
  const location = useLocation();
  const { message } = location.state || {};
  return <div>信息: {message}</div>;
}

在这个例子中，使用了<Link>的state属性来传递一个包含消息的对象。在目标组件中，可以通过useLocation钩子访问这个状态。

以上都是在React Router v6中传递参数的常见方法，可以根据实际需求选择合适的方式。