Next.js 13动态路由：如何获取正确参数展示对应数据？

核心思路 #

你当前的代码在遍历整个动物数组，这不符合动态路由的逻辑。正确做法是：先拿到当前路径的slug参数，用这个参数从数组筛选出对应数据，最后渲染单个条目。

步骤1：获取路由参数 #

在Next.js 13的App Router模式下，[slug]/page.jsx组件可以直接接收params作为参数，解构后就能得到当前路径的动态部分：

// [slug]/page.jsx
export default function AnimalPage({ params }) {
  const { slug } = params; // 比如访问/lion时，slug的值就是"lion"
  // 后续逻辑写在这里
}

步骤2：匹配对应动物数据 #

假设你的animals数组里每个对象的Link字段是"/lion"这类路径，我们可以通过去掉前缀"/"来匹配slug；如果数组里有专门的slug字段（比如animal.slug = "lion"），直接匹配更高效。这里以Link字段为例：

// 示例animals数组（替换成你自己的数据源）
const animals = [
  { Name: "狮子", Info: "群居的草原顶级掠食者", Link: "/lion" },
  { Name: "老虎", Info: "独居的森林霸主", Link: "/tiger" },
  { Name: "大象", Info: "陆地上体型最大的哺乳动物", Link: "/elephant" }
];

export default function AnimalPage({ params }) {
  const { slug } = params;
  // 筛选出对应slug的动物
  const targetAnimal = animals.find(item => item.Link.slice(1) === slug);
  
  // 处理找不到数据的情况
  if (!targetAnimal) {
    return <div>404：该动物不存在</div>;
  }
}

步骤3：渲染单个动物数据 #

现在直接渲染筛选出来的targetAnimal即可，无需遍历整个数组：

export default function AnimalPage({ params }) {
  const { slug } = params;
  const animals = [/* 你的动物数组 */];
  const targetAnimal = animals.find(item => item.Link.slice(1) === slug);

  if (!targetAnimal) {
    return <div>404：未找到指定动物</div>;
  }

  return (
    <div className="animal-card">
      <h2>{targetAnimal.Name}</h2>
      <p>{targetAnimal.Info}</p>
      {/* 可选：添加返回列表页的链接 */}
      <Link href="/">返回动物列表</Link>
    </div>
  );
}

优化技巧（可选） #

如果你的动物数据是固定的，推荐用generateStaticParams预先生成所有可能的路由，实现静态页面生成，提升加载速度：

// 在[slug]/page.jsx中添加这个函数
export async function generateStaticParams() {
  const animals = [/* 你的动物数组 */];
  return animals.map(animal => ({
    slug: animal.Link.slice(1)
  }));
}

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