Next.js 13动态链接路由时无法向跳转组件传递props问题求助

问题描述 #

正在通过书籍《Building React Apps using server-side rendering》学习Next.js 13.4.19，构建的基础React应用中，首页通过链接跳转到SecondPage页面，但SecondPage无法获取URL中的查询参数：console.log输出空对象{}，浏览器报错，无法显示预期的“Welcome to Page 1”内容。

问题原因 #

1. 参数获取方式过时：Next.js 13的Pages Router中，不再通过组件props传递url对象，旧写法props.url.query已失效。
2. 组件未导出：sharedComponents/DynamicRouter.js中的GetLink组件未添加导出语句，会导致首页引入时出错。

解决步骤 #

1. 修复DynamicRouter.js的组件导出 #

在sharedComponents/DynamicRouter.js末尾添加导出语句，确保组件能被正确引入：

import React from "react";
import Link from "next/link";

function GetLink(props) {
  return (
    <div>
      <Link href={`/SecondPage?content=${props.title}`}>{props.title}</Link>
    </div>
  );
}

// 添加导出语句
export default GetLink;

2. 更新SecondPage.js的参数获取方式 #

根据场景选择以下两种方式之一：

方式一：客户端组件使用useRouter钩子

适合无需服务端处理参数的场景：

import { useRouter } from 'next/router';

export default function SecondPage() {
  const router = useRouter();
  // 从router.query中获取content参数
  const { content } = router.query;

  console.log(router.query);

  return (
    <h1>
      Welcome to {content}
    </h1>
  );
}

方式二：服务端渲染使用getServerSideProps

需要在服务端处理参数时使用，参数会通过props传递给组件：

export default function SecondPage({ content }) {
  console.log(content);

  return (
    <h1>
      Welcome to {content}
    </h1>
  );
}

// 服务端获取参数并传递给组件
export async function getServerSideProps(context) {
  const { content } = context.query;
  return {
    props: { content }
  };
}

完成以上修改后，重新启动应用，点击首页链接即可正确显示“Welcome to Page 1”等内容。

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