使用应用程序文件夹中的 Next.js 读取 URL 动态参数/slug

小能豆

使用应用程序文件夹中的 Next.js 读取 URL 动态参数/slug

javascript

我在获取动态路由中的参数时遇到问题。我在阅读时不断收到错误：

类型错误：无法解构“router.query”的属性“themenID”，因为它未定义。

另外，我不能使用next/router但必须集成路由器next/navigation。但这个没有查询属性。我使用 Next.js 版本 13

该路径的名称如下：http://localhost:3000/MainThema/2。

应用程序/MainThema/[themenID]/page.js：

"use client";
import { useRouter } from "next/navigation";
import React from "react";

export default function MainThema() {
  const router = useRouter();
  console.log(router);

  const { themenID } = router.query;

  return <div>MainThema </div>;
}

阅读 143

2023-08-01

共1个答案

小能豆

在 Next.js 13 中，next/navigation 提供的路由器对象没有 query 属性来访问动态路由中的参数。取而代之的是，您可以使用 useParams 钩子来获取动态路由中的参数。

在您的代码中，只需将 useRouter 替换为 useParams 并删除对 query 的引用，然后直接使用 themenID 变量来访问动态路由中的参数。

修改后的代码如下所示：

import { useParams } from 'next/navigation';
import React from 'react';

export default function MainThema() {
  const { themenID } = useParams();
  console.log(themenID);

  return <div>MainThema </div>;
}

使用 useParams 钩子后，您应该能够成功获取动态路由中的参数。请注意，useParams 返回一个对象，您可以直接从中解构出需要的参数值。在您的例子中，themenID 变量将包含从动态路由中获取的参数值。

2023-08-01