Next.js如何使用相对路由实现无需填写全路径的页面跳转

结论 #

你写的router.push('/time/123')无法实现目标跳转，正确的相对路由写法不需要写完整路径，只要去掉开头的斜杠即可。

具体规则 #

Next.js的路由跳转路径解析遵循通用的web路径规则：

• 路径开头带/：属于根路径绝对路径，会从站点根目录开始解析。你写/time/123会直接跳转到http://localhost:3000/time/123，不符合你的需求。
• 路径开头不带/：属于当前路径下的相对路径，会基于当前页面的路由自动拼接。你当前在/project/613路径下，直接调用router.push('time/123')，就会自动拼接为/project/613/time/123，完全满足你的跳转需求。

示例代码 #

// Pages Router 导入方式
import { useRouter } from 'next/router'
// App Router 导入方式（Next.js 13+）
// import { useRouter } from 'next/navigation'

function ProjectPage() {
  const router = useRouter()

  const goToTimePage = () => {
    // 直接写相对路径即可，无需拼接项目id
    router.push('time/123')
  }

  return <button onClick={goToTimePage}>跳转到时间页面</button>
}

以上逻辑在Pages Router和App Router模式下均适用。

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