Javascript 使用 app 文件夹中的 Next.js 读取 URL 动态参数slug

发布于04月27日

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

TypeError:无法对‘router.Query’的属性‘temenID’进行 struct 分析，因为该属性未定义.

此外，我不能使用next/router，但必须从next/navigation集成路由.但是这个没有Query属性.我使用的是Next.js版本13

这条路的名字是这样的:http://localhost:3000/MainThema/2.

APP/MainThema/[hemenID]/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>;
}

推荐答案

正如您可以在doc上看到的那样，当您的page.js组件处于动态段中时，会向其传递一个params对象.这个params将包含您的动态路由ID，如下所示:

// app/MainThema/[themenID]/page.js

export default function MainThema({ params }) {
  const { themenID } = params;

  return <div>{themenID}</div>;
}

如果您需要在某个嵌套的客户端组件中获取它，则应该使用useParams钩子，如下所示:

// app/SomeClientComponent

'use client';

import { useParams } from 'next/navigation';

export default function SomeClientComponent() {
  const params = useParams();

  // Route -> /MainThema/[themenID]
  // URL -> /MainThema/28390AUEE8Z2
  // params -> { themenID: '28390AUEE8Z2' }
  console.log(params)

  return <></>
}

Javascript相关问答推荐

使用expressjs加载Nuxt版本=3.9.0(自定义服务器)

Javascript 使用 app 文件夹中的 Next.js 读取 URL 动态参数slug

推荐答案

Javascript相关问答推荐

使用expressjs加载Nuxt版本=3.9.0(自定义服务器)

promise .all()永不解决

React：如何将表格收件箱正确渲染为表格主体内的组件？

序列查找器功能应用默认值而不是读取响应

如何修复内容安全策略指令脚本-SRC自身错误？

深嵌套的ng-container元素仍然可以在Angular 布局组件中正确渲染内容吗？

没有输出到带有chrome.Devtools扩展的控制台

了解Node.js中的EventEums和浏览器中的addEventEums之间的关系

数字时钟在JavaScript中不动态更新

如果Arrow函数返回函数，而不是为useEffect返回NULL，则会出现错误

material UI按钮组样式props 不反射

覆盖加载器页面避免对页面上的元素进行操作

Rxjs流中生成IMMER不能在对象上操作

在JS中动态创建对象，并将其追加到HTML表中

使用Ace编辑器对子组件实例的native-element 进行Angular 获取时面临的问题

打字脚本中方括号符号属性访问和拾取实用程序的区别

基于产品ID更新条带产品图像的JavaScript命中错误

无法检索与Puppeteer的蒸汽游戏的Bundle 包价格

重新呈现-react -筛选数据过多

未找到用于 Select 器的元素：in( puppeteer 师错误)