NextJS中不使用useRouter获取动态页面slug信息的方法

在Next.js 13及以上的App Router中，next/router的useRouter已被弃用，客户端组件需改用next/navigation提供的useParams来获取动态路由参数，完全适配你的场景。

修改后的代码示例 #

"use client";

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

export default function Breedpage() {
    // 获取动态路由中的slug参数，通过泛型指定类型确保类型安全
    const params = useParams<{ slug: string }>();
    const slug = params.slug;
  
    // 拆分slug为两个单词，处理slug为空的边界情况
    const [firstWord, secondWord] = slug ? slug.split('-') : ['', ''];

    return (
        <div>
            <h1>First Word: {firstWord}</h1>
            <h1>Second Word: {secondWord}</h1>    
        </div>
    )
}

关键注意事项 #

• 确保你的路由结构为App Router规范下的动态路由，即文件路径为app/breed/[slug]/page.tsx，这样[slug]对应的路由参数才能被useParams正确捕获。
• useParams仅能在客户端组件中使用，因此文件顶部的"use client"指令必须保留。
• 通过泛型<{ slug: string }>指定参数类型，可避免TypeScript类型报错，提升代码健壮性。

兼容Pages Router的备选方案（不推荐） #

若你尚未迁移到App Router，next/router的useRouter在旧版Next.js中仍可使用，但官方已明确推荐迁移至App Router，因此优先采用上述方案。

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