react-router-dom v6添加查询参数后无法渲染组件问题咨询

问题原因 #

react-router-dom v6 中，<Route> 的 path 属性只匹配 URL 的路径部分，不会包含 ? 开头的查询参数。你把 Route 的 path 改成 "reviews?page=1" 后，路由系统会尝试匹配路径为 reviews?page=1 的 URL，但实际访问的 URL 路径是 reviews，?page=1 属于查询参数、不属于路径，所以匹配失败，导致 ReviewTab 组件无法渲染。

正确做法 #

1. 保持 Route 的 path 为 "reviews"，查询参数不影响路由匹配
2. 在 ReviewTab 组件内部，通过 useSearchParams 钩子获取查询参数的值

修改后的路由代码：

<NavLink to='reviews?page=1'>reviewTab</NavLink>

<Routes>
  <Route path="reviews" element={<ReviewTab />}></Route>
</Routes>

ReviewTab 组件获取分页参数示例：

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

function ReviewTab() {
  // 获取查询参数对象
  const [searchParams] = useSearchParams();
  // 取出page参数，默认值设为1
  const currentPage = searchParams.get('page') || '1';

  // 这里写你的分页逻辑，比如根据currentPage请求对应数据
  return (
    <div>
      <h3>评论列表</h3>
      <p>当前页码：{currentPage}</p>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者robin14dev