NextJS中如何获取动态slug参数及查询历史slug名称？

一、获取嵌套动态路由中的postID参数 #

你的路由结构是[postID]/[title].tsx，NextJS的useRouter钩子（Pages Router）会把所有动态路由参数都放在query对象里，直接用router.query.postID就能拿到，注意要处理路由还没加载完成时query可能为undefined的情况，用可选链或者条件判断都可以。

修改后的代码示例：

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

export default function PostDetail() {
    const router = useRouter()
    // 用可选链避免路由未加载时的报错
    const title = router.query.title
    const postID = router.query.postID

  return (
    <div>
      <p>文章ID: {postID}</p>
      <p>文章标题: {title}</p>
    </div>
  )
}

如果是用NextJS 13+的App Router，用useParams钩子会更简洁：

import { useParams } from 'next/navigation'
import React from 'react'

export default function PostDetail() {
    const params = useParams()
    const title = params.title
    const postID = params.postID

  return (
    <div>
      <p>文章ID: {postID}</p>
      <p>文章标题: {title}</p>
    </div>
  )
}

二、查询之前的Slug名称的最佳方法 #

1. 通过历史记录解析（Pages Router） #

可以借助浏览器的history API结合router.asPath来获取上一个路径，再解析出slug，不过这种方式需要自己处理路径拆分：

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

export default function SomeComponent() {
    const router = useRouter()

    useEffect(() => {
        // 获取上一条历史记录的路径
        const previousPath = history.state?.back || ''
        // 拆分路径取最后一段作为slug（根据你的路由结构调整）
        const previousSlug = previousPath.split('/').pop()
        console.log('之前的slug:', previousSlug)
    }, [router.asPath])

    return <div>...</div>
}

2. 路由跳转时传递状态（推荐） #

在跳转到新页面时，通过router.push的状态参数把之前的slug传过去，这样目标页面直接就能拿到，更可靠：

// 列表页跳转代码
import { useRouter } from 'next/router'

function PostList() {
    const router = useRouter()

    const goToDetail = (postID, title, previousSlug) => {
        router.push(`/${postID}/${title}`, undefined, {
            state: { previousSlug }
        })
    }

    return <button onClick={() => goToDetail(1, 'test-title', 'old-post-slug')}>查看详情</button>
}

然后在详情页获取：

import { useRouter } from 'next/router'

export default function PostDetail() {
    const router = useRouter()
    // 优先取路由状态里的slug，避免刷新后丢失
    const previousSlug = router.state?.previousSlug

    return <div>之前的slug: {previousSlug}</div>
}

3. App Router 中的实现方式（NextJS 13+） #

App Router里用useRouter的state来传递和获取同样方便：

// 列表页跳转组件
import { useRouter } from 'next/navigation'

function PostList() {
    const router = useRouter()

    const goToDetail = (postID, title, previousSlug) => {
        router.push(`/${postID}/${title}`, {
            state: { previousSlug }
        })
    }

    return <button onClick={() => goToDetail(1, 'test-title', 'old-post-slug')}>查看详情</button>
}

详情页获取：

import { useRouter } from 'next/navigation'

export default function PostDetail() {
    const router = useRouter()
    const previousSlug = router.state?.previousSlug

    return <div>之前的slug: {previousSlug}</div>
}

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