如何在使用react路由器<Link>时向路由传递道具

在使用React Router的<Link>组件时，可以通过几种不同的方式向路由传递参数（道具）。以下是一些基础概念和相关方法：

基础概念

路由参数：这些是路径的一部分，通常用于动态路由，例如/user/:id。
查询参数：这些是以问号?开头的键值对，附加在URL的末尾，例如/search?q=react。
状态对象：通过<Link>组件的state属性传递的数据，不会显示在URL中，但可以在导航时保持状态。

类型与应用场景

路由参数：适用于标识资源的唯一ID，如用户资料页面/user/:userId。
查询参数：适用于搜索条件、分页等，如/products?page=2&sort=price。
状态对象：适用于需要在页面间传递但不想显示在URL中的数据，如模态框的打开状态。

示例代码

以下是如何使用React Router v6向路由传递参数的示例：

安装React Router

首先，确保你已经安装了React Router：

npm install react-router-dom

使用路由参数

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

function User({ match }) {
  return <h2>User ID: {match.params.id}</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/user/123">User 123</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </Router>
  );
}

使用查询参数

import { useSearchParams } from 'react-router-dom';

function Search() {
  let [searchParams] = useSearchParams();
  return <h2>Search Query: {searchParams.get('q')}</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/search?q=react">Search React</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/search" element={<Search />} />
      </Routes>
    </Router>
  );
}

使用状态对象

function Home() {
  return (
    <Link to={{ pathname: '/about', state: { fromDashboard: true } }}>
      Go to About
    </Link>
  );
}

function About() {
  const location = useLocation();
  return <h2>Navigation from dashboard: {location.state?.fromDashboard ? 'Yes' : 'No'}</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}