React BrowserRouter跳转刷新页面出现404问题

最新推荐文章于 2025-10-20 20:38:04 发布

原创最新推荐文章于 2025-10-20 20:38:04 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

个人总结专栏收录该内容

16 篇文章

订阅专栏

本文探讨了React项目中使用BrowserRouter导致的404错误现象，详细解析了问题产生的原因在于本地开发环境下webpack从内存读取资源，而BrowserRouter未能正确定位到文件路径。文章提供了两种解决方案，一是采用HashRouter，但考虑到SEO因素不推荐；二是通过修改webpack配置文件，特别是启用historyApiFallback特性，有效解决了页面刷新后的404问题。

最近手动配置React项目出现页面跳转404现象

原因本地开发webpack是从内存中读取资源browserrouter从实际引入中并未找到文件，故而会出现404的问题

解决方案有两种

其一：采用hashrouter 这点不多说，因为hash模式对seo不够友好，所以不太采用这种方式

其二：修改webpack配置文件，在本地开发中作者做出了如下的配置

devServer: {
        clientLogLevel: 'warning',
        historyApiFallback: {
            rewrites: [
                { from: /.*/, to: path.posix.join(config.dev.assertPublicPath,'index.html') },
            ],
        },
        hot: true,
        contentBase: false, // since we use CopyWebpackPlugin.
        compress: true,
        open:true,
        port:config.dev.port,
    },
    plugins: [
        new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, '../static'),
                to: config.dev.assetsSubDirectory,
                ignore: ['.*']
            }
        ])
    ]

重点是historyApiFallback 这个解决了刷新页面404的问题！