Next.js如何从当前子页面跳转至对应父级路由页面？

方案1：使用组件（静态跳转优先选这个） #

Next.js内置的Link组件可以直接绑定目标路由，跳转逻辑和浏览器历史记录无关，完全符合你固定跳转到指定父级路由的需求：

// 页面顶部导入组件
import Link from 'next/link'

// JSX中直接使用
<Link href="/home/sports">
  <button>返回</button>
</Link>

方案2：编程式跳转（需要前置逻辑时用） #

如果点击返回前需要先执行数据保存、状态修改等操作，可以用useRouter钩子实现跳转：

// 导入Pages Router对应的useRouter
import { useRouter } from 'next/router'

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

  const handleBack = () => {
    // 这里可添加自定义前置逻辑
    router.push('/home/sports')
  }

  return (
    <div>
      {/* 其他页面内容 */}
      <button onClick={handleBack}>返回</button>
    </div>
  )
}

通用动态上一级跳转（不用硬编码路由） #

如果希望所有子页面都能自动识别父级路由跳转，不需要每次手动写目标路径，可以动态处理当前路由：

import { useRouter } from 'next/router'

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

  const goParentRoute = () => {
    // 拆分当前路径，去掉最后一段得到父级路由
    const parentPath = router.asPath.split('/').slice(0, -1).join('/')
    router.push(parentPath)
  }

  return <button onClick={goParentRoute}>返回上一级</button>
}

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