NextJS 13.4.9（App Router）按钮跳转动态路由的实现方法

App Router 下的 useRouter 确实只支持字符串路径跳转，没法像 Page Router 那样传路由对象。下面是针对你的三级动态路由结构的具体跳转实现方案：

1. 基础导入 #

首先需要在客户端组件中导入 useRouter（必须添加 'use client' 指令）：

'use client';
import { useRouter } from 'next/navigation';

2. 跳转到顶层动态路由（仅 [division] 层级） #

直接拼接目标路径字符串即可：

const router = useRouter();

const navigateToDivision = () => {
  router.push('/northwest'); // 替换为你需要的division值
};

<button onClick={navigateToDivision}>跳转到西北赛区</button>

3. 跳转到二级动态路由（[division]/[team]） #

拼接两个动态段的完整路径：

const navigateToTeam = () => {
  router.push('/northwest/blazers'); // 替换为实际的division和team值
};

<button onClick={navigateToTeam}>跳转到开拓者队</button>

4. 跳转到三级动态路由（[division]/[team]/[player]） #

拼接三个动态段的完整路径：

const navigateToPlayer = () => {
  router.push('/northwest/blazers/lillard'); // 替换为实际的division、team、player值
};

<button onClick={navigateToPlayer}>跳转到利拉德页面</button>

5. 基于当前路由的嵌套跳转 #

如果需要在现有路由基础上跳转（比如当前在 /northwest，要跳转到同赛区的另一支球队），可以结合 usePathname 获取当前路径再拼接：

'use client';
import { useRouter, usePathname } from 'next/navigation';

const router = useRouter();
const currentPath = usePathname();

const navigateToAnotherTeam = () => {
  router.push(`${currentPath}/rockets`); // 在当前路径后追加team段
};

<button onClick={navigateToAnotherTeam}>跳转到火箭队</button>

6. 动态参数跳转 #

如果路由参数来自状态或接口数据，直接用模板字符串拼接即可：

'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';

const router = useRouter();
const [selectedDivision, setSelectedDivision] = useState('southwest');
const [selectedTeam, setSelectedTeam] = useState('mavericks');

const navigateToDynamicRoute = () => {
  router.push(`/${selectedDivision}/${selectedTeam}`);
};

<button onClick={navigateToDynamicRoute}>跳转到选中的球队</button>

核心规则：App Router 的 push 方法只接受完整的字符串路径，你需要手动把各个动态路由段拼接成合法的路径字符串，不管是顶层还是深层路由都遵循这个逻辑。

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