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

最新推荐文章于 2024-08-25 08:54:43 发布

DemoLw

最新推荐文章于 2024-08-25 08:54:43 发布

阅读量3.2k

点赞数 2

分类专栏：个人总结

本文链接：https://blog.csdn.net/DemoLw/article/details/83616536

版权

个人总结专栏收录该内容

16 篇文章 0 订阅

订阅专栏

最近手动配置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的问题！