React Router useParams获取URL中folderId返回undefined问题求助及替代方案咨询

你遇到的核心问题是**useParams()只能在被<Route>直接渲染的组件（或该组件的后代组件）中使用**，而你的App组件是包裹整个<Routes>的父组件，不在任何路由匹配的范围内，所以在这里调用useParams()必然返回undefined。

一、最规范的解决方法：将参数使用逻辑移到路由匹配组件中 #

你的/:folderId路由对应的是ShowNotes组件，所以应该把获取和使用folderId的逻辑放到ShowNotes里，而不是在App组件中尝试获取：

修改ShowNotes组件示例 #

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

function ShowNotes({ userId }) {
  // 这里可以正常拿到folderId
  const { folderId } = useParams();
  console.log('Folder ID:', folderId);

  return (
    <div>
      <p>当前文件夹ID：{folderId}</p>
      {/* 你的其他渲染逻辑 */}
    </div>
  );
}

export default ShowNotes;

之后就可以删掉App组件中关于folderId的代码（const { folderId } = useParams()、console.log(folderId)、<p>Id is {folderId}</p>），因为这些逻辑已经移到了正确的组件中。

二、特殊场景：如果必须在App组件中获取参数 #

如果你的业务逻辑确实需要在App层级获取路由参数，可以使用useLocation配合正则手动解析URL路径：

代码示例 #

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

function App() {
  // 其他代码...
  const location = useLocation();
  // 正则匹配路径中的folderId（匹配/xxx格式的路径）
  const folderIdMatch = location.pathname.match(/^\/([^/]+)$/);
  const folderId = folderIdMatch ? folderIdMatch[1] : undefined;
  
  console.log('Folder ID from App:', folderId);
  // 其他代码...
}

不过这种方式属于“兜底方案”，不推荐常规使用，因为它需要自己处理路由规则的变化，不如useParams()灵活可靠。

三、React Router v6 获取URL内容的其他方式 #

除了useParams()，还有两种常用的获取URL信息的方式：

1. useSearchParams()：用于获取URL中的查询参数（比如?page=1&size=10）

   import { useSearchParams } from 'react-router-dom';
   
   function ExampleComponent() {
     const [searchParams, setSearchParams] = useSearchParams();
     // 获取page参数
     const page = searchParams.get('page');
     // 设置参数
     const handleChangePage = () => setSearchParams({ page: '2' });
   }
   

2. useLocation()：获取完整的路由位置信息（包括路径、查询参数、哈希等），适合复杂场景的自定义解析。

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