next.js动态路由

实习小子

于 2023-05-29 20:59:25 发布

阅读量603

点赞数

本文链接：https://blog.youkuaiyun.com/m0_66809099/article/details/130936500

版权

文章介绍了如何在Next.js应用中创建并使用动态路由。首先，创建一个以动态值为名的tsx文件，然后通过`useRouter`hook来获取访问路径中的动态值。在Detail组件中，利用`router.query`来获取并显示动态id。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

next想要使用动态路由

1.创建[动态的值].tsx

2.访问的路径

3.当前页面获取动态的值

import React from 'react'
import { useRouter } from 'next/router'

const Detail = () => {
  const router = useRouter()

  const { id } = router.query

  console.log(router.query)

  return (
    <div>{id}</div>
  )
}

export default Detail