在Next.js上使用应用程序路由创建动态顶级页面13

jaql4c8m 于 2023-10-18 发布在其他

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

我正在使用NextJS 13与应用程序路由，我需要像下面这样的动态页面

mydomain.com/about
mydomain.com/contact

我在app目录app/[slug].tsx中创建了一个文件，并放入以下代码：

import { FC } from 'react'
import React from "react"

interface pageProps {
  params: { slug: string }
}

const Page: FC<pageProps> = ({ params }) => {
  return (
    <h1>{params.slug}</h1>
  )
}
export default Page

404页面找不到了你能告诉我我做错了什么吗？
阅读nextjs文档，了解App和Pages路由的区别。

next.js

来源：https://stackoverflow.com/questions/77192809/create-dynamic-top-level-page-with-app-routing-on-next-js-13

1条答案

按热度按时间

hivapdat1#

您应该用方括号命名该文件夹，并在其中放置一个page.tsx文件。

// in: app/[slug]/page.tsx

import { FC } from 'react'
import React from "react"

interface pageProps {
  params: { slug: string }
}

const Page: FC<pageProps> = ({ params }) => {
  return (
    <h1>{params.slug}</h1>
  )
}
export default Page

有关更多信息，请参阅有关如何使用Dynamic Routes in Next JS.的官方文档

赞(0）回复(0）举报 2023-10-18

我来回答

在Next.js上使用应用程序路由创建动态顶级页面13

1条答案

相关问题

热门标签

最新问答