umijs / umi

A framework in react community ✨
https://umijs.org
MIT License
15.3k stars 2.65k forks source link

[Bug] umi3升级到umi4后 url中query变化导致整个页面重新渲染 紧急 #12699

Closed liyang1234567890 closed 2 days ago

liyang1234567890 commented 1 week ago

之前在umi3中页面都是正常的,升级到umi4后发现url中query发生变化,整个页面重新渲染了,使用"@umijs/max": "4.3.20",下面是我的config配置,想和之前保持一致,比较着急我需要怎么做求帮看,感谢

export default defineConfig({
      title: false,
      fastRefresh: true,
      initialState: {},
      model: {},
      manifest: {
          basePath: '/',
      },
      publicPath,
      hash: true,
      antd: {},
      locale: {
          default: 'en-US',
      },
      layout: {
          ...defaultSettings,
      },
      styledComponents: {},
      mfsu: false,
      npmClient: 'pnpm',
      esbuildMinifyIIFE: true,
      routes,
      theme: {
          ...colors,
          '@font-family': `Shopee2021, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
          'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
          'Noto Color Emoji'`,
          '@border-radius-base': '5px',
          '@tag-border-radius': '5px',
      },
      ignoreMomentLocale: true,
      proxy: proxy[REACT_APP_ENV || 'dev'],
      // umi4不支持document.ejs
      links: [
          {
              rel: 'icon',
              type: 'image/x-icon',
              href: `${publicPath}logo.png`,
          },
      ],
      metas: [
          {
              httpEquiv: 'Cache-Control',
              content: 'no-cache',
          },
          {
              httpEquiv: 'Pragma',
              content: 'no-cache',
          },
          {
              httpEquiv: 'Expires',
              content: '0',
          },
      ],
      extraBabelPlugins: [
          [
              'babel-plugin-import',
              {
                  libraryName: '@formily/antd',
                  libraryDirectory: 'lib',
                  style: true,
              },
              '@formily/antd',
          ],
      ],
      define: {
          __APP_VERSION__: appVersion,
          ABTEST_COLORS: colors,
          PROXY_ENV: process.env.PROXY_ENV || '',
      },
      headScripts: [
          '!function(){var _;if(!(null===(_=window.__MDAP_PREV_RESOURCE__)||void 0===_?void 0:_.init)){window.__MDAP_PREV_RESOURCE__={data:[],init:!0};var n=function(_){var n;null===(n=window.__MDAP_PREV_RESOURCE__.data)||void 0===n||n.push(_)};window.addEventListener("error",n,!0),window.__MDAP_PREV_RESOURCE__.removePrevListener=function(){window.removeEventListener("error",n)}}}();',
          'window.consume_start_time=new Date().getTime();window.request_flag=false;',
      ],
      devtool:
          process.env.NODE_ENV === 'production' ? 'hidden-source-map' : 'source-map',
      chainWebpack(memo, { env, webpack, createCSSRule }) {
        memo
          .plugin('replace')
          .use(
            new webpack.NormalModuleReplacementPlugin(
              /@shopee\/solar-design\/dist\/@shopee\/solar-design.css/,
              path.resolve(__dirname, './temporary.css'),
            ),
          );
        memo.plugin('monaco-editor').use(MonacoWebpackPlugin, [
          {
            languages: ['yaml', 'json', 'sql'],
            customLanguages: [
              {
                label: 'yaml',
                entry: 'monaco-yaml',
                worker: {
                  id: 'monaco-yaml/yamlWorker',
                  entry: 'monaco-yaml/yaml.worker',
                },
              },
            ],
          },
        ]);
        memo.module
          .rule('mjs-rule')
          .test(/.m?js/)
          .resolve.set('fullySpecified', false);
        memo.plugin('module-federation').use(
          new webpack.container.ModuleFederationPlugin({
            name: 'abtest',
            filename: 'remoteEntry.js',
            exposes: {
              './dataset_list': './src/pages/dataset/exposes/list.tsx',
              './dataset_config': './src/pages/dataset/exposes/config.tsx',
            },
            library: { type: 'var', name: 'abtest' },
          }),
        );
        return memo;
      },
      access: {
          strictMode: false,
      },
});

下面是分别在umi3和umi4中同一个页面的录屏,切换tab时将tabkey同步到url query中,umi3中切换后只有底部变更,umi4中整个页面重新刷新了

https://github.com/user-attachments/assets/5983f680-385e-49dd-95ff-4c46c219d2a4

xiaohuoni commented 2 days ago

可以同时开这两个配置试试 https://umijs.org/docs/api/config#historywithquery https://umijs.org/docs/api/config#reactrouter5compat

    reactRouter5Compat: {},
    historyWithQuery: {},

还有异常的话,给一个复现 demo