Next.js跳转动态路由时getInitialProps数据不更新问题咨询

疑问解答 #

• componentDidMount 可以获取query参数：你只需要用Next.js提供的withRouter高阶组件包裹你的页面组件，就可以通过this.props.router.query拿到路由参数。
• 关于生命周期和getInitialProps的执行时机：componentDidMount 仅在组件首次挂载到DOM时执行1次，并不是每次渲染都执行，组件更新时触发的是componentDidUpdate生命周期；getInitialProps 也不是仅首次渲染执行，它只会在页面组件初始化时执行，同个页面组件路由参数变化时，Next.js默认会复用组件实例，不会重新触发getInitialProps，这就是你跳转同页面不同ID时数据不更新的核心原因。
• 你需要用componentDidUpdate检测参数变化，这是最稳定的可行方案。

现有实现的问题 #

你完全依赖getInitialProps拉取数据，但同页面路由参数变化时组件不会重建，getInitialProps不会重新执行，自然拿不到新ID对应的数据。

修复方案 #

方案1：最小改动，无需修改页面组件代码 #

在所有跳转到/content/[uniqueid]的Link组件上添加key属性，值为对应的内容ID：

<Link 
  href="/content/[uniqueid]" 
  as={`/content/${contentId}`} 
  key={contentId}
>
  <a>内容标题</a>
</Link>

加key后，React会识别到参数变化，销毁旧的页面组件实例、创建新实例，自动重新触发getInitialProps拉取新数据。

方案2：兼容服务端渲染+客户端参数变化的稳定方案 #

调整组件代码，结合路由监听和生命周期处理请求：

import { withRouter } from 'next/router'
import axios from 'axios'

class Content extends React.Component {
  state = {
    details: null,
    loading: false
  }

  // 公共请求方法复用
  fetchDetails = async (uid) => {
    this.setState({ loading: true })
    try {
      const res = await axios.post('/api/details', { uid })
      if (res.data.response.boolean) {
        this.setState({
          details: res.data.payload[0],
          loading: false
        })
      }
    } catch (e) {
      // 处理错误/404逻辑
      this.setState({ loading: false })
    }
  }

  static async getInitialProps({ query }) {
    // 保留用于服务端首次渲染请求，保证SEO效果
    return { initialUid: query.uniqueid }
  }

  componentDidMount() {
    // 首次挂载触发请求
    this.fetchDetails(this.props.initialUid)
  }

  componentDidUpdate(prevProps) {
    // 检测路由ID变化，变化时重新拉取数据
    const currentUid = this.props.router.query.uniqueid
    if (prevProps.router.query.uniqueid !== currentUid) {
      this.fetchDetails(currentUid)
    }
  }

  render() {
    const { loading, details } = this.state
    if (loading) return <div>加载中...</div>
    if (!details) return <div>内容不存在</div>
    // 原有渲染逻辑
  }
}

// 用withRouter包裹后才能拿到router对象
export default withRouter(Content)

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