Next.js动态路由触发404错误求助：新手开发者的路由问题

问题复盘 #

开发Next.js应用时，访问/restaurants/edit/1这类动态路由页面出现404错误。已有C#、C++开发经验，接触React/Next.js仅几周，尝试查阅官方文档、调整文件目录均未解决。

核心问题 #

1. App Router路由结构错误 #

混淆了App Router与Pages Router的动态路由规则：

• App Router中，动态参数需要以文件夹形式命名（如[id]），最终页面必须放在该文件夹下的page.tsx中
• 原结构app/restaurants/edit/[id].tsx不符合App Router规则，对应路由/restaurants/edit/[id]的正确结构应为app/restaurants/edit/[id]/page.tsx

2. API使用错误 #

useRouter是Pages Router专属API，App Router客户端组件需使用useParams获取动态路由参数。

修正步骤 #

步骤1：调整目录结构 #

将原文件重构为如下层级：

app/
├── page.tsx
├── restaurants/
│   ├── page.tsx
│   └── edit/
│       └── [id]/
│           └── page.tsx

步骤2：修正页面代码 #

修改app/restaurants/edit/[id]/page.tsx内容：

"use client";

import { useParams } from 'next/navigation'

export default function EditRestaurant() {
  const params = useParams()
  const id = params.id as string

  if (!id) return <p>Chargement...</p>;

  return <p>ID du restaurant : {id}</p>
}

可选路由结构（ID后置） #

若需要路由为/restaurants/[id]/edit，调整目录结构为：

app/
├── page.tsx
├── restaurants/
│   ├── page.tsx
│   └── [id]/
│       └── edit/
│           └── page.tsx

同时修改app/restaurants/page.tsx中的链接：

<Link href="/restaurants/1/edit">Edit Restaurant 1</Link>
<Link href="/restaurants/2/edit">Edit Restaurant 2</Link>

关键说明 #

• App Router路由基于文件系统层级，每个路由段对应一个文件夹，最终页面必须是文件夹内的page.tsx
• useParams是App Router客户端组件获取动态参数的标准方式，useRouter仅适用于Pages Router
• 若同时存在app/和pages/目录，Next.js会优先使用App Router，需保持路由体系统一

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