Next.JS路由组中的动态路由

ny6fqffe 于 2023-05-06 发布在其他

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

在我的Next.JS应用程序中，我有以下[id].tsx：

"use client";
import { useRouter } from "next/router";

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  return <p>Post: {id}</p>;
};

export default Post;

(1)如果它放在文件夹“test”中，它工作得很好，所以它的位置是test/[id].tsx
(2)如果我把它放在一个“路由组”中，它就不起作用，所以如果它的位置是(mygroup)/test/[id].tsx-〉它给我一个404错误。
我接受任何简单地向我解释我可以让它与路由组一起工作的答案。

next.js

来源：https://stackoverflow.com/questions/76145845/dynamic-routes-in-next-js-route-groups

1条答案

按热度按时间

jhkqcmku1#

我修复了它。我的问题是，我的Next.JS项目设置为：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
}

module.exports = nextConfig

所以我的文件夹结构应该是这样的：
(mygroup)/test/[id]/page.tsx
而page.tsx看起来应该是：

"use client";

const Post = ({ params }) => {
  const { id } = params;

  return <p>Post: {id}</p>;
};

export default Post;

赞(0）回复(0）举报 2023-05-06

我来回答

Next.JS路由组中的动态路由

1条答案

相关问题

热门标签

最新问答