Next.js动态路由[...uri]中getServerSideProps路由跳转不触发问题解决

问题原因 #

Next.js中，通过next/link或useRouter进行客户端路由跳转时，会复用目标页面的组件实例，不会重新触发getServerSideProps——这个方法仅在首次服务端渲染（直接打开页面、刷新页面）时执行。所以你从/test1跳转到/test2时，组件还是之前的实例，props里的namespaces自然保持初始的/test1。

解决方案 #

方案1：客户端监听路由变化更新数据（推荐）

在页面组件中用useRouter监听路由变化，手动更新数据或状态，适配客户端跳转的场景：

import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'

export default function DynamicPage({ initialNamespaces }) {
  const router = useRouter()
  // 用初始服务端数据初始化状态
  const [namespaces, setNamespaces] = useState(initialNamespaces)

  useEffect(() => {
    // 路由路径变化时，更新状态
    setNamespaces(router.asPath)
    
    // 如果需要重新获取服务端数据，这里可以发起请求
    // 比如调用API接口获取对应路径的数据
    // fetch(`/api/getData?path=${router.asPath}`)
    //   .then(res => res.json())
    //   .then(data => { /* 更新组件状态 */ })
  }, [router.asPath]) // 依赖router.asPath，路径变化时触发

  return <div>当前路径：{namespaces}</div>
}

export async function getServerSideProps(ctx) {
  console.log('GET INITIAL PROPS !!!', ctx)
  return {
    props: { initialNamespaces: ctx.resolvedUrl ?? "null" },
  }
}

方案2：强制跳转时刷新页面（不推荐，影响体验）

如果必须触发getServerSideProps，可以放弃客户端路由，改用普通<a>标签跳转，或者在useRouter.push时强制刷新：

• 用普通a标签：

<a href="/test2">跳转到test2</a>

• 用useRouter强制刷新：

router.push('/test2', undefined, { forceRefresh: true })

这种方法会刷新整个页面，虽然能触发getServerSideProps，但会损失客户端路由的流畅体验，仅在特殊场景使用。

方案3：检查是否误用了shallow路由

如果你跳转时用了shallow: true参数（比如router.push('/test2', undefined, { shallow: true })），会强制复用组件不更新数据，此时需要去掉shallow: true，或者结合方案1手动处理数据更新。

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