React BrowserRouter跳转刷新页面出现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的问题!

你可能感兴趣的:(个人总结)