Next.js路由传参全攻略

Next.js作为一个强大的React框架，提供了多种灵活的路由传参方式。本文将详细介绍这些方法，并探讨它们在不同场景下的应用。

基础传参方法

1. 动态路由

Next.js支持在文件名中使用方括号来创建动态路由。这是最常用的方法之一。

复制
1// pages/posts/[id].js
2import { useRouter } from 'next/router'
3
4export default function Post() {
5  const router = useRouter()
6  const { id } = router.query
7
8  return <p>Post: {id}</p>
9}

访问 /posts/1 时，id 参数会被设置为 "1"。

2. 查询字符串

可以通过URL的查询字符串传递参数：

复制
1// pages/about.js
2import { useRouter } from 'next/router'
3
4export default function About() {
5  const router = useRouter()
6  const { name } = router.query
7
8  return <p>About: {name}</p>
9}

访问 /about?name=John 时，name 参数会被设置为 "John"。

3. Link组件

使用 Link 组件时可以传递参数：

复制
1import Link from 'next/link'
2
3function Home() {
4  return (
5    <Link
6      href={{
7        pathname: '/about',
8        query: { name: 'John' },
9      }}
10    >
11      About John
12    </Link>
13  )
14}

4. 编程式导航

使用 router.push() 或 router.replace() 进行编程式导航时也可以传递参数：

复制
1import { useRouter } from 'next/router'
2
3function HomePage() {
4  const router = useRouter()
5
6  return (
7    <button onClick={() => router.push({
8      pathname: '/about',
9      query: { name: 'John' },
10    })}>
11      About John
12    </button>
13  )
14}

高级传参场景

1. 嵌套动态路由

Next.js支持嵌套的动态路由：

复制
1// pages/posts/[category]/[id].js
2import { useRouter } from 'next/router'
3
4export default function Post() {
5  const router = useRouter()
6  const { category, id } = router.query
7
8  return <p>Post: {id} in {category}</p>
9}

访问 /posts/tech/123 时，category 会被设置为 "tech"，id 会被设置为 "123"。

2. Catch-all 路由

使用 ... 可以捕获所有后续的路径段：

复制
1// pages/posts/[...slug].js
2import { useRouter } from 'next/router'
3
4export default function Post() {
5  const router = useRouter()
6  const { slug } = router.query
7
8  return <p>Slug: {slug.join('/')}</p>
9}

访问 /posts/2023/01/01 时，slug 将是一个数组 ['2023', '01', '01']。

3. 国际化路由

对于多语言网站，Next.js提供了内置的国际化路由支持：

复制
1// next.config.js
2module.exports = {
3  i18n: {
4    locales: ['en', 'fr', 'de'],
5    defaultLocale: 'en',
6  },
7}
8
9// pages/blog/[slug].js
10import { useRouter } from 'next/router'
11
12export default function Blog() {
13  const router = useRouter()
14  const { locale, slug } = router.query
15
16  return <p>Blog post {slug} in {locale}</p>
17}

访问 /fr/blog/hello-world 时，locale 会被设置为 "fr"，slug 会被设置为 "hello-world"。

4. 复杂对象作为路由参数

有时需要传递复杂对象作为参数。可以使用 JSON 字符串和 encodeURIComponent：

复制
1const complexObject = { key1: 'value1', key2: 'value2' }
2const encodedObject = encodeURIComponent(JSON.stringify(complexObject))
3
4router.push(`/page?data=${encodedObject}`)
5
6// 在目标页面
7const { data } = router.query
8const decodedObject = JSON.parse(decodeURIComponent(data))

5. 动态API路由

Next.js的API路由也支持动态参数：

复制
1// pages/api/users/[id].js
2export default function handler(req, res) {
3  const { id } = req.query
4  res.status(200).json({ id, name: `User ${id}` })
5}

结论

Next.js提供了丰富而灵活的路由传参方式，可以满足各种复杂的应用场景。从简单的动态路由到复杂的国际化路由，开发者可以根据具体需求选择最适合的方法。合理使用这些传参技术，可以构建出更加动态和交互性强的Web应用。

在实际开发中，要根据项目的具体需求和复杂度来选择合适的传参方法。同时，也要考虑到性能、SEO和用户体验等因素，以确保应用的整体质量。