升级Next.js与next-transpile-modules后Router.push页面不重渲染问题

核心原因1：动态路由的Router.push写法不符合Next.js 9.5+规范 #

Next.js 9.5版本后对动态路由的push逻辑做了严格校验，你当前直接将newId拼接进pathname的写法，会让框架无法识别这是同一个动态路由页面（/path/[id]）的参数变更，反而会判定为跳转至全新静态路径，因此不会触发页面重渲染与数据重新获取。

正确写法应为：将pathname指定为动态路由的模板路径，通过query传递id参数，可选传入第二个参数作为显示的URL：

import Router from 'next/router';
...
Router.push({
  pathname: '/path/[id]', // 动态路由模板路径，而非拼接后的实际路径
  query: {
    id: newId,
    // 其他参数
  },
}, `/path/${newId}`); // 可选：控制浏览器地址栏显示的URL

核心原因2：next-transpile-modules 7.x的兼容性配置问题 #

next-transpile-modules 7.x针对Next.js 9.5做了适配，但如果你的next.config.js未同步更新配置，可能导致页面组件或路由逻辑被错误转译，进而影响路由更新后的渲染行为。

检查配置文件，确保转译模块列表仅包含你需要转译的第三方依赖，不要包含Next.js核心模块（如next/router）：

const withTM = require('next-transpile-modules')(['需要转译的模块名']);

module.exports = withTM({
  // 其他Next.js配置项
});

额外排查点：类组件的路由参数监听逻辑 #

如果页面类组件依赖getInitialProps获取路由参数，需确认该方法是否能正确接收更新后的query。在shallow: false的情况下，Next.js 9.5应重新调用getInitialProps；若未触发，可通过withRouter注入路由对象，在componentDidUpdate中手动监听参数变化：

import { withRouter } from 'next/router';

class YourPage extends React.Component {
  componentDidUpdate(prevProps) {
    if (prevProps.router.query.id !== this.props.router.query.id) {
      this.fetchData(this.props.router.query.id);
    }
  }

  // 数据获取等其他逻辑
}

export default withRouter(YourPage);

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