Next.js含ID的URL页面跳转失败（404）求助

页面结构不匹配导致404 #

你要跳转的路由是/hello/[id]/world，但你创建的是hello-world页面，这不符合Next.js的路由规则。Next.js的路由完全基于pages目录的文件结构，要匹配该动态路由，你需要在pages下创建如下结构：

pages/
└── hello/
    └── [id]/
        └── world.js

即依次创建hello文件夹、[id]文件夹，最后在[id]文件夹内创建world.js（或.tsx）页面文件，这样路由才能正确映射。

代码错误修正 #

1. Router的正确用法 #

Next.js函数组件中需使用useRouter钩子获取路由实例，而非直接导入Router对象：

import { useRouter } from 'next/router'

// 在函数组件内部调用钩子
const router = useRouter()

2. 按钮点击事件修正 #

你的onClick存在语法错误，且若按钮未设置id属性，element.id会是空值。假设你要传递的ID为具体值（比如从数据中获取），修正后的代码：

const redirect = (id) => {
  const url = `/hello/${id}/world`
  router.push(url)
}

// 示例ID，实际可从props或状态中获取
const itemId = 123

return (
  <button onClick={() => redirect(itemId)}>跳转到详情页</button>
)

完整可运行示例 #

import { useRouter } from 'next/router'

const ButtonComponent = () => {
  const router = useRouter()
  const itemId = 123 // 替换为实际ID值

  const redirectToDetail = (id) => {
    router.push(`/hello/${id}/world`)
  }

  return (
    <button onClick={() => redirectToDetail(itemId)}>跳转到详情页</button>
  )
}

export default ButtonComponent

内容的提问来源于stack exchange，提问作者Tosin Ayoola