React路由传参的三种方式详解

在 React 中使用 react-router-dom 进行路由传参是非常常见的需求，特别是在构建动态页面时。React Router 提供了几种方式来传递参数，包括路径参数（URL 参数）、查询参数和状态参数。下面我会分别介绍这些方式，并给出具体的实现方法。

目录

一、路径参数（URL 参数）

二、查询参数

三、状态参数（state 参数）

 一、路径参数（URL 参数）

路径参数是 URL 路径的一部分，可以通过 :param 语法来定义。访问时，可以通过 useParams 钩子来获取这些参数。

在App.jsx中：

import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import Home from './pages/Home';
import Product from './pages/Product';

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/home">首页</Link></li>
            <li><Link to="/product/123">产品 123</Link></li>
          </ul>
        </nav>

        <Routes>
          <Route path="home" element={<Home />} />
          {/* 定义动态路径 */}
          <Route path="product/:id" element={<Product />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

在Product.jsx中获取路径参数：

useParams 是 React Router 提供的一个钩子（Hook），它用于在函数组件中访问路由的动态参数。:id就是一个动态参数

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

const Product = () => {
  // 获取路径参数
  const { id } = useParams();

  return (
    <div>
      <h2>产品页面</h2>
      <p>当前产品 ID: {id}</p>
    </div>
  );
}

export default Product;

 useParams()的返回值是：

拿到的参数是： 

二、查询参数

查询参数是 URL 中 ? 后面的部分，它通常用于传递一些额外的参数信息。React Router 提供了 useLocation 钩子来访问查询参数。

在App.jsx中：

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

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/product?id=123">查看产品 123</Link></li>
          </ul>
        </nav>

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

export default App;

在Product.jsx中获取查询参数：

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

const Product = () => {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const id = queryParams.get('id'); // 获取查询参数 id

  return (
    <div>
      <h2>产品页面</h2>
      <p>当前产品 ID: {id}</p>
    </div>
  );
}

export default Product;

打印出来的location：

打印出来的 queryParams：

为什么要使用 URLSearchParams？

虽然 location 对象中包含了查询字符串部分（location.search），但它只是一个普通的字符串，你不能直接通过该字符串访问其中的各个查询参数。因此，需要使用 URLSearchParams 来解析和操作这些参数。

URLSearchParams 提供了方便的方法，如：

• get(name)：获取指定参数名称的值。
• has(name)：检查某个参数是否存在。
• set(name, value)：设置某个参数的值。
• append(name, value)：向查询字符串中追加一个参数。
• toString()：将 URLSearchParams 转换回查询字符串。

拿到的参数是：

三、状态参数（state 参数）

除了路径参数和查询参数，你还可以使用 state 来传递参数。state 是一种通过路由传递数据的方式，而不会直接显示在 URL 中。

在App.jsx中：

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

const App = () => {
  const productData = { id: 123, name: "Product A" };

  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              {/* 通过 state 传递数据 */}
              <Link to="/product" state={productData}>
                查看产品 123
              </Link>
            </li>
          </ul>
        </nav>

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

export default App;

在Product.jsx中获取查询参数：

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

const Product = () => {
  const location = useLocation();
  const product = location.state;

  return (
    <div>
      <h2>产品页面</h2>
      {product ? (
        <div>
          <p>产品 ID: {product.id}</p>
          <p>产品名称: {product.name}</p>
        </div>
      ) : (
        <p>未传递产品数据。</p>
      )}
    </div>
  );
}

export default Product;

打印location会出现：

页面上的参数是：