Next.js App Route(TypeScript)页面间数据传递问题求助

你的代码存在两个核心问题：一是路由参数传递格式错误，二是详情页获取数据的方式完全不正确。下面提供两种可行的解决方案，优先推荐动态路由方案。

方案一：使用URL查询参数（Search Params） #

1. 修正首页的Link传参逻辑 #

把query改成键值对格式，建议传递唯一标识id（避免名称重复导致匹配错误）：

// app/page.tsx
import Link from 'next/link'

const listMember = [
  { id: 1, name: "name1", age: 20 },
  { id: 2, name: "name2", age: 18 },
  { id: 3, name: "name3", age: 2 }
]

export default function HomePage() {
  return (
    <ul className="px-5">
      {listMember.map(member => (
        <li key={member.id}>
          <Link
            href={{
              pathname: "/detail",
              query: { memberId: member.id }
            }}
          >
            {member.name}
          </Link>
        </li>
      ))}
    </ul>
  )
}

2. 详情页获取参数并匹配数据 #

在App Router中，页面组件可通过searchParams props获取URL查询参数，再根据id匹配对应数据：

// app/detail/page.tsx
const listMember = [
  { id: 1, name: "name1", age: 20 },
  { id: 2, name: "name2", age: 18 },
  { id: 3, name: "name3", age: 2 }
]

export default function Detail({ searchParams }: { searchParams: { memberId?: string } }) {
  const memberId = searchParams.memberId ? Number(searchParams.memberId) : null
  const member = memberId ? listMember.find(m => m.id === memberId) : null

  if (!member) {
    return <h1>Member not found</h1>
  }

  return (
    <>
      <h1>This is detail page of {member.name}</h1>
      <p>Age: {member.age}</p>
    </>
  )
}

方案二：使用动态路由（推荐） #

动态路由的URL更友好（如/detail/1），符合RESTful风格，是更规范的实现方式。

1. 创建动态路由页面 #

在app目录下新建路径：detail/[memberId]/page.tsx（方括号是动态路由的标识）

2. 首页修改Link跳转路径 #

// app/page.tsx
import Link from 'next/link'

const listMember = [
  { id: 1, name: "name1", age: 20 },
  { id: 2, name: "name2", age: 18 },
  { id: 3, name: "name3", age: 2 }
]

export default function HomePage() {
  return (
    <ul className="px-5">
      {listMember.map(member => (
        <li key={member.id}>
          <Link href={`/detail/${member.id}`}>
            {member.name}
          </Link>
        </li>
      ))}
    </ul>
  )
}

3. 动态路由页面获取参数并匹配数据 #

动态路由的参数通过params props获取：

// app/detail/[memberId]/page.tsx
const listMember = [
  { id: 1, name: "name1", age: 20 },
  { id: 2, name: "name2", age: 18 },
  { id: 3, name: "name3", age: 2 }
]

export default function Detail({ params }: { params: { memberId: string } }) {
  const memberId = Number(params.memberId)
  const member = listMember.find(m => m.id === memberId)

  if (!member) {
    return <h1>Member not found</h1>
  }

  return (
    <>
      <h1>This is detail page of {member.name}</h1>
      <p>Age: {member.age}</p>
    </>
  )
}

优化建议 #

• 把listMember抽成单独的数据源文件（如app/lib/members.ts），首页和详情页统一导入，避免代码重复：

// app/lib/members.ts
export const listMember = [
  { id: 1, name: "name1", age: 20 },
  { id: 2, name: "name2", age: 18 },
  { id: 3, name: "name3", age: 2 }
]

导入方式：import { listMember } from '@/app/lib/members'

• 路由路径统一用小写（如/detail而非/Detail），避免Next.js路由大小写匹配问题。

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