React点击卡片通过ID跳转新路由并渲染详情卡片问题求助

核心问题分析 #

• Card组件所在的Home路由（/）没有:id参数，所以在Card里用useParams根本拿不到ID，完全没必要移过去。
• 当前卡片没有添加跳转逻辑，点击自然不会触发路由跳转。

分步修改代码 #

1. 给Card组件添加跳转链接

导入Link组件，把每个用户卡片包裹成可点击的路由链接：

// Card.js
import { Link } from 'react-router-dom'

export default function Card({ users }) {
  return (
    <>
      {users.map((user) => {
        return (
          <Link to={`/user/${user.id}`} key={user.id} className='card-link'>
            <div className='card'>
              <h2>{user.name}</h2>
              <p><strong>City:</strong> {user.address.city}</p>
            </div>
          </Link>
        )
      })}
    </>
  )
}

可以给链接加样式去掉默认下划线：

/* App.css */
.card-link {
  text-decoration: none;
  color: inherit;
}

2. 完善User组件的边界处理

补充加载状态和用户未找到的提示，避免页面空白：

// User.js
import { useParams } from "react-router-dom"

export default function User({ users }) {
  const { id } = useParams()
  const intId = parseInt(id)

  // 处理用户数据还未加载的情况
  if (users.length === 0) {
    return <div className="card-container">加载中...</div>
  }

  const targetUser = users.find(user => user.id === intId)

  if (targetUser) {
    return (
      <div className="card-container">
        <div className='card'>
          <h2>{targetUser.name}</h2>
          <p><strong>City:</strong> {targetUser.address.city}</p>
          <p>Email: {targetUser.email}</p>
          <p>Website: {targetUser.website}</p>
          <p>Company: {targetUser.company.name}</p>
        </div>    
      </div>
    )
  } else {
    return <div className="card-container">未找到该用户</div>
  }
}

3. 修正代码中的语法错误

把所有代码里的转义双引号\"改成正常的双引号"，避免语法报错：

// App.js（修正后）
import { useState, useEffect } from 'react'
import { Route, Routes } from 'react-router-dom'
import Home from './pages/Home.jsx'
import User from './pages/User.jsx'
import './App.css'

function App() {
  const [users, setUsers] = useState([])
  useEffect(() =>{
      fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => setUsers(data))
  }, [])

  return (
    <> 
      <Routes>
        <Route path="/" element={<Home users={users}/>}/>
        <Route path='/user/:id' element={<User users={users}/>}/> 
      </Routes>
    </>
  )
}

export default App

// Home.js（修正后）
import Card from "../components/Card" 

export default function Home({users}){
    return(
        <>
            <div className='card-container'>
                {users && <Card users={users}/>}
            </div>
        </>
    )
}

关键说明 #

useParams只能在当前路由匹配的组件或其子组件中获取参数，Card组件渲染在/路由下，这个路由没有定义:id参数，所以调用useParams()拿到的是空对象，自然获取不到ID。正确的做法是在匹配/user/:id的User组件中使用useParams来获取ID。

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