React函数组件中如何从URL的/:id获取路由参数？

这是React Router官方推荐的方案，既能支持通过Link跳转的场景，也完全兼容用户直接在浏览器输入URL的情况，比手动截取URL或依赖state传递更可靠高效。

步骤说明： #

1. 确认React Router版本：确保你使用的是React Router v6及以上版本（v5也支持useParams，但v6的API更简洁）。
2. 在BlogDetail组件中导入useParams：从react-router-dom中引入这个钩子。
3. 调用useParams获取id参数：直接解构出路由配置中定义的:id参数。

完整代码示例： #

1. App.js中的路由配置（已配置的基础上确认）

import { Routes, Route } from 'react-router-dom';
import Blogs from './Blogs';
import BlogDetail from './BlogDetail';

function App() {
  return (
    <Routes>
      <Route path="/blogs" element={<Blogs />} />
      {/* 你的路由配置已经正确，保持不变 */}
      <Route path="/blog-detail/:id" element={<BlogDetail />} />
    </Routes>
  );
}

export default App;

2. Blogs组件中的Link跳转（保持你的现有逻辑即可）

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

function Blogs() {
  // 假设这里有博客列表数据
  const blogs = [
    { id: 1, title: "第一篇博客" },
    { id: 2, title: "第二篇博客" }
  ];

  return (
    <div>
      {blogs.map(blog => (
        <Link key={blog.id} to={`/blog-detail/${blog.id}`}>
          {blog.title}
        </Link>
      ))}
    </div>
  );
}

export default Blogs;

3. BlogDetail组件中获取id参数

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

function BlogDetail() {
  // 解构出路由参数中的id
  const { id } = useParams();

  // 现在就可以用id去请求对应的博客详情数据了
  console.log("当前博客ID：", id);

  return (
    <div>
      <h1>博客详情页</h1>
      <p>当前博客ID：{id}</p>
    </div>
  );
}

export default BlogDetail;

为什么这个方案可行？ #

• useParams是React Router专门为获取URL路由参数设计的API，会自动解析路由配置中定义的动态参数（比如:id）。
• 不管是通过Link跳转，还是用户直接在浏览器地址栏输入/blog-detail/123，都能正确获取到id的值。
• 不需要手动处理URL字符串，避免了截取参数时可能出现的格式错误，代码更简洁易维护。

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