我用于动态内容和路由的 next.js 代码未按预期工作

Question

我正在关注关于 next.js 的 YouTube 教程，但我被困在了一个起点。我正在尝试使用以下代码为我的网站创建动态内容和路由，但出现错误：

import Link from 'next/Link';

const people = [
    {v: 'car', name: 'bruno'},
    {v: 'bike', name: 'john'},
    {v: 'airplane', name: 'mick'}
]

export default function Details (){
    return <div>
        {people.map( e => (

        <div>

            <Link as={'/${e.v}/${e.name}'} href="/[vehicle]/[person]">
            <a>Navigate to {e.name}'s {e.v}</a>
            </Link>

        </div>
        

        ))}
        
    </div>
}

上面代码的动态路由实际上运行良好。但是当我转到我的详细信息页面时，内容看起来像“${e.name}'s ${e.v}”这个。根据我的参数，它看起来不像。我相信问题是因为这条线：

<Link as={'/${e.v}/${e.name}'} href="/[vehicle]/[person]">

我试图将“'”这个引号改为这个“´”后引号，但这也不起作用。你能帮帮我吗？

我的开发者工具控制台中也出现此错误。我出于某种目的更改了 fb.me 链接。

Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using <div>. See blablafb.me/react-warning-keys for more information.
    in Link (at Details.js:13)
    in Details
    in App
    in Unknown
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in AppContainer

Answer 1

在您的 /pages/index.js 文件中，您将单引号 ' 与反引号 ` 更改为允许字符串插值，并将 key 属性添加到您映射到人员数组的顶级 div：

import Link from "next/link";

const people = [
  { v: "car", name: "bruno" },
  { v: "bike", name: "john" },
  { v: "airplane", name: "mick" }
];

export default function Details() {
  return (
    <div>
      {people.map((e, idx) => (
        <div key={idx}>
          <Link href="/[vehicle]/[person]" as={`/${e.v}/${e.name}`} passHref>
            <a>
              Navigate to {e.name}'s {e.v}
            </a>
          </Link>
        </div>
      ))}
    </div>
  );
}

然后创建/pages/[vehicle]/[person].js，根据您点击的链接显示不同的内容：

import { useRouter } from "next/router";
import Link from "next/link";

export default function Person() {
  const router = useRouter();
  const { vehicle, person } = router.query;

  return (
    <div>
      <p>
        Vehicle: {vehicle}, Person: {person}
      </p>
      Go back{" "}
      <Link href="/" passHref>
        <a>Home</a>
      </Link>
    </div>
  );
}