javascript 使用Next读取URL动态参数/slug,应用文件夹中的js

cwxwcias 于 2023-04-28 发布在 Java

关注(0)|答案(1)|浏览(454)

在动态路由中获取参数时遇到问题。我在阅读时不断出错：
TypeError：无法解构“router”的属性“themenID”。查询，因为它是未定义的。
此外，我不能使用next/router，但必须从next/navigation集成路由器。但是这个没有query属性。我用Next。js版本13
路径的名称如下：http://localhost:3000/MainThema/2。
app/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>;
}

JavaScript

来源：https://stackoverflow.com/questions/76110930/read-url-dynamic-parameter-slug-with-next-js-in-the-app-folder

1条答案

按热度按时间

fhity93d1#

正如您在文档中所读到的，当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 { themenID } = useParams();

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

赞(0）回复(0）举报 2023-04-28

我来回答

javascript 使用Next读取URL动态参数/slug,应用文件夹中的js

1条答案

相关问题

热门标签

最新问答