Next.js动态路由跳转静态路由异常问题求助

问题原因 #

这是相对路径跳转引发的路由拼接错误。当你在notice/test页面用相对路径notice/跳转时，Next.js会以当前路径notice/test为基准拼接，最终得到notice/test/notice/，浏览器解析后就变成了notice/notice。

解决方案 #

直接使用绝对路径跳转，就能确保路由指向正确的静态路由：

1. 使用next/link组件时 #

把跳转路径改成以/开头的绝对路径：

import Link from 'next/link';

// 错误写法（相对路径）
<Link href="notice/">返回通知列表</Link>

// 正确写法（绝对路径）
<Link href="/notice/">返回通知列表</Link>

2. 使用useRouter编程式跳转时 #

同样采用绝对路径：

import { useRouter } from 'next/router';

const router = useRouter();

// 错误写法
router.push('notice/');

// 正确写法
router.push('/notice/');

验证逻辑 #

用绝对路径/notice/时，Next.js会直接从根路由开始匹配，不管当前处于哪个子路由，都能准确跳转到notice/静态路由页面，不会出现路径拼接错误。

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