React Router v6使用useLoaderData无法渲染卡片详情问题求助

常见问题点及排查步骤 #

1. 路由参数名不匹配 #

• 检查App.js中CardDetails的路由定义，参数名（比如:cardId）必须和CardDetails.js中useParams()解构的参数名完全一致

  // 错误示例：路由参数名与解构名不一致
  <Route path="/cards/:id" element={<CardDetails />} loader={cardDetailsLoader} />
  // CardDetails.js 中错误解构
  const { cardId } = useParams();
  
  // 正确示例：保持参数名一致
  <Route path="/cards/:cardId" element={<CardDetails />} loader={cardDetailsLoader} />
  // CardDetails.js 对应解构
  const { cardId } = useParams();
  

2. Loader函数未正确使用路由参数请求数据 #

• 确认cardDetailsLoader函数中，是否正确从params中获取ID，并拼接正确的db.json请求路径，同时添加基础错误处理

  // 错误示例：未使用路由参数或路径拼接错误
  export async function cardDetailsLoader() {
    const res = await fetch('http://localhost:3000/cards'); // 未传入ID
    return res.json();
  }
  
  // 正确示例：使用路由参数拼接请求路径
  export async function cardDetailsLoader({ params }) {
    const res = await fetch(`http://localhost:3000/cards/${params.cardId}`);
    if (!res.ok) {
      throw new Response("卡片数据加载失败", { status: 404 });
    }
    return res.json();
  }
  

3. db.json数据结构不匹配 #

• 确保db.json中的cards数组内，每个对象都包含与路由参数匹配的ID字段（比如id或cardId），且字段类型一致（避免路由参数是字符串、db中ID是数字的类型差异）

  // 正确的db.json结构示例
  {
    "cards": [
      {
        "id": "1",
        "name": "Babe Ruth",
        "team": "New York Yankees",
        "position": "Outfielder"
      }
    ]
  }
  

4. 路由层级或匹配规则冲突 #

• 检查CardDetails的路由是否被其他路由规则拦截（比如父路由的模糊匹配、错误使用index路由），确保路由路径能精准匹配详情页链接

代码修正示例（结合常见错误场景） #

App.js 修正后 #

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import BaseSet from './BaseSet';
import CardDetails, { cardDetailsLoader } from './CardDetails';

const router = createBrowserRouter([
  {
    path: '/',
    element: <BaseSet />,
  },
  {
    path: '/cards/:cardId', // 统一参数名
    element: <CardDetails />,
    loader: cardDetailsLoader,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

CardDetails.js 修正后 #

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

export async function cardDetailsLoader({ params }) {
  const res = await fetch(`http://localhost:3000/cards/${params.cardId}`);
  if (!res.ok) {
    throw new Error('无法获取卡片详情');
  }
  return res.json();
}

function CardDetails() {
  const card = useLoaderData();
  const { cardId } = useParams(); // 与路由参数名一致

  return (
    <div className="card-details">
      <h2>{card.name}</h2>
      <p>所属球队: {card.team}</p>
      <p>场上位置: {card.position}</p>
    </div>
  );
}

export default CardDetails;

额外检查项 #

• 启动json-server时确认端口与请求端口一致，比如执行json-server --watch db.json --port 3000
• 打开浏览器开发者工具的Network标签，查看详情页的请求状态、URL和返回数据是否正常
• 确认BaseSet.js中链接路径正确，比如<Link to={/cards/${card.id}}>{card.name}</Link>，确保card.id与db.json中的ID字段完全匹配

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