如何在生成文件时阻止React页面重新渲染？

这个问题我之前开发时也碰到过，核心原因很明确：开发环境下React的开发服务器会监听public目录的文件变更——当API在public里生成新PDF时，dev server检测到文件变化就会自动触发页面刷新，直接打断了你的跳转逻辑，导致页面又回到当前页。

下面是几个可行的解决思路，按推荐度排序：

1. 更改PDF生成目录（推荐开发环境使用） #

把PDF的生成路径从public转移到项目根目录下的独立文件夹（比如pdf-output），dev server默认不会监听这个目录，自然不会触发自动刷新：

• 第一步：在项目根目录创建pdf-output文件夹；
• 第二步：修改API配置，让它把PDF生成到这个新文件夹；
• 第三步（可选）：如果需要前端访问这些PDF，可配置dev server把pdf-output作为静态资源目录。比如用craco的话，在craco.config.js中添加：

const path = require('path');

module.exports = {
  devServer: {
    static: [
      {
        directory: path.join(__dirname, 'pdf-output'),
        publicPath: '/generated-pdfs/'
      }
    ]
  }
};

之后就能通过/generated-pdfs/xxx.pdf访问生成的文件了。

2. 让dev server忽略public里的PDF文件 #

如果不想修改生成路径，可以通过webpack配置让dev server忽略public目录下的PDF文件变更：
以craco为例，在craco.config.js中配置：

const path = require('path');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.watchOptions = {
        ...webpackConfig.watchOptions,
        ignored: [
          ...(webpackConfig.watchOptions?.ignored || []),
          path.join(__dirname, 'public/*.pdf')
        ]
      };
      return webpackConfig;
    }
  }
};

这样即使PDF生成在public里，dev server也不会因这个文件的变化触发页面刷新。

3. 修正跳转代码的写法 #

顺便提一句，你的跳转写法可能存在问题，React Router的history.push正确用法应该是：

this.props.history.push('/other_page', { pdfName: res.pdf_name });

之后在目标页面可以通过props.location.state.pdfName拿到文件名。

生产环境说明 #

不用担心生产环境出现这个问题——生产环境下React没有开发服务器的热重载机制，生成PDF到public目录不会触发页面自动刷新，只要确保文件路径配置正确即可。

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