Next.js中如何条件控制路由拦截，按需渲染完整页面？

方法1：用useRouter手动触发客户端导航（推荐） #

不管你用的是App Router还是Pages Router，手动调用路由实例的push方法都能绕过拦截路由的逻辑，实现无刷新跳转到完整页面：

App Router 写法 #

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

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

  const handleJobClick = (jobId) => {
    // 这里写你的条件判断逻辑
    const needFullPage = true // 示例条件

    if (needFullPage) {
      // 直接跳转到完整职位页面，不触发拦截
      router.push(`/job/${jobId}`)
    } else {
      // 走原有拦截路由的逻辑（比如打开模态框）
    }
  }

  return (
    <div>
      <button onClick={() => handleJobClick('dev-001')}>查看开发岗</button>
    </div>
  )
}

Pages Router 写法 #

import { useRouter } from 'next/router'

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

  const handleJobClick = (jobId) => {
    const needFullPage = true // 示例条件
    if (needFullPage) {
      router.push(`/job/${jobId}`)
    }
  }

  return <button onClick={() => handleJobClick('dev-001')}>查看开发岗</button>
}

原理说明 #

拦截路由是Next.js基于Link组件的跳转上下文自动触发的，而手动调用router.push属于显式的客户端导航，不会触发拦截规则，会直接加载目标页面的完整内容，同时保持页面不刷新。

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