Next.js App Router中Link组件动态路由href的正确配置方法

你遇到的错误是因为c.name是一个包含common属性的对象，直接拼接进href会被JavaScript转换为[object Object]，导致生成无效的路由路径。

正确的实现方式 #

需要修改以下几点：

• 用c.name.common替换c.name，获取国家的通用名称字符串，确保路由路径格式有效
• 为map循环的每个列表项添加唯一key属性，避免React渲染警告
• 将Link组件内的硬编码文本改为动态的国家名称

修改后的完整代码 #

import Link from "next/link";

type Country = {
  name: {
    common: string
  },
  region: string
}

export default async function Home() {
  const response = await fetch(`https://restcountries.com/v3.1/all`);
  const countries = await response.json() as Country[];

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      {
        countries.map((c) => {
          return (
            <Link 
              key={c.name.common} 
              href={`/countries/${c.name.common}`}
            >
              {c.name.common}
            </Link>
          );
        })
      }
    </main>
  );
}

额外说明：添加as Country[]类型断言可以让TypeScript更好地校验响应数据类型，减少潜在的类型问题。

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