Reactjs中如何从URL获取ID？附代码及路由配置

你的路由配置已经正确设置了动态参数user/:id，只需要修正组件里的几个细节，就能正常获取并使用URL中的ID：

1. 简化useParams()的使用 #

你已经调用了useParams()，但无需重复调用，一次解构就能拿到ID：

const User = () => {
  // 直接从useParams中解构出id
  const { id } = useParams();
  const [user, setUser] = useState({}); // 变量名改成user更贴合单条数据的场景

  // ...后续逻辑
}

2. 修复useEffect的依赖问题 #

你的useEffect依赖数组为空，会导致只有组件挂载时执行一次请求，ID变化时不会重新触发请求。需要把id加入依赖数组，同时增加基础的错误处理：

useEffect(() => {
  async function fetchData() {
    try {
      const res = await axios(`https://jsonplaceholder.typicode.com/comments/${id}`);
      setUser(res.data);
    } catch (err) {
      // 避免请求失败导致页面异常，增加错误日志
      console.error('获取数据失败:', err);
    }
  }

  // 确保id存在时再发起请求，避免初始状态下id为undefined的情况
  if (id) {
    fetchData();
  }
}, [id]); // 将id加入依赖数组，ID变化时自动重新请求

3. 完整修正后的User组件代码 #

import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';

const User = () => {
  const { id } = useParams();
  const [user, setUser] = useState({});

  useEffect(() => {
    async function fetchData() {
      try {
        const res = await axios(`https://jsonplaceholder.typicode.com/comments/${id}`);
        setUser(res.data);
      } catch (err) {
        console.error('获取用户数据失败:', err);
      }
    }

    if (id) {
      fetchData();
    }
  }, [id]);

  return (
    <div style={{ width: "80%", margin: "0 auto" }}>
      <div
        style={{
          margin: "20px",
          marginRight: "auto",
          borderRadius: "20px",
          border: "2px solid #000",
          width: "50%",
          padding: "10px",
        }}
      >
        {/* 渲染获取到的用户数据 */}
        <h3>用户ID: {id}</h3>
        <p>名称: {user.name}</p>
        <p>邮箱: {user.email}</p>
        <p>内容: {user.body}</p>
      </div>
    </div>
  );
};

export default User;

验证效果 #

你可以在组件里直接console.log(id)，或者在页面上渲染{id}，就能看到URL中的ID值（比如19）已经被正确获取并使用。

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