React Router：如何在路由所在组件内获取路由参数？同级组件Pagination无法获取curPage参数的解决方案

这个问题我之前也碰到过，核心原因是你的Pagination组件和定义路由的Route是同级关系，而useParams钩子只能在Route渲染的组件（也就是someComponent）及其子组件中获取到对应路由的参数——因为只有这些组件处于该Route的上下文范围内。直接在同级的Pagination里调用useParams自然拿不到值。

下面给你几个可行的解决办法：

解决方案一：将Pagination作为someComponent的子组件 #

这是最直接的方式，只要把Pagination放到someComponent内部，它就自动进入了目标Route的上下文，就能正常使用useParams了。

修改someComponent的代码：

const SomeComponent = () => {
  return (
    <div>
      {/* 这里放你的产品列表内容 */}
      <Pagination />
    </div>
  );
};

然后allProducts组件里的结构可以保留原来的样子，Pagination就能直接获取到curPage参数了。

解决方案二：在allProducts中获取参数后传给Pagination #

如果你的布局要求Pagination必须和产品列表组件同级，那可以在allProducts组件中先拿到路由参数，再通过props传递给Pagination。

针对React Router v6+的实现 #

1. 先调整路由结构为嵌套路由（让allProducts作为父路由组件）：

// 根路由文件
import { Routes, Route } from 'react-router-dom';
import AllProducts from './AllProducts';
import SomeComponent from './SomeComponent';

function App() {
  return (
    <Routes>
      <Route path="/products" element={<AllProducts />}>
        {/* 子路由继承父路由的路径，所以这里只需要写`:curPage` */}
        <Route path=":curPage" element={<SomeComponent />} />
      </Route>
    </Routes>
  );
}

2. 修改allProducts组件，用useParams获取参数并传递给Pagination：

import { useParams, Outlet } from 'react-router-dom';
import Pagination from './Pagination';

const AllProducts = () => {
  // 嵌套路由下，父组件可以通过useParams拿到子路由的参数
  const { curPage } = useParams();

  return (
    <div>
      {/* 用Outlet渲染子路由对应的组件（也就是SomeComponent） */}
      <Outlet />
      {/* 将curPage作为props传给Pagination */}
      <Pagination curPage={curPage} />
    </div>
  );
};

3. 最后修改Pagination组件，直接使用props中的参数：

const Pagination = (props) => {
  const { curPage } = props;
  return <div>当前页码：{curPage}</div>;
};

针对React Router v5的实现 #

如果还在使用React Router v5，可以用useMatch钩子来匹配目标路径获取参数：

import { useMatch } from 'react-router-dom';
import Pagination from './Pagination';

const AllProducts = () => {
  // 匹配/products/:curPage路径，拿到参数
  const match = useMatch('/products/:curPage');
  const curPage = match?.params?.curPage;

  return (
    <div>
      <Route path='/products/:curPage' component={SomeComponent} />
      <Pagination curPage={curPage} />
    </div>
  );
};

Pagination组件同样通过props接收curPage即可。

总结 #

如果布局允许，方案一更简单；如果必须保持Pagination和产品列表同级，方案二是更合适的选择。

内容的提问来源于stack exchange，提问作者Nyi Nyi Hmue Aung