React-router中使用BrowserRouter跳转后刷新出现404问题的解决

问题引入

react路由的browserRouter使用的是h5 history API 的高阶路由组件，保证你的 UI 界面和 URL 保持同步。但是有个缺点，一刷新页面就会出现404找不到，原因是本地开发webpack是从内存中读取资源browserRouter从实际引入中并未找到文件。也就是说咱们需要访问服务器的根目录下的index文件返回数据渲染页面，但是browser模式向服务器的非根路径下发送了请求，所以找不到页面。

解决方案一：

使用HashRouter来跳转，只是url里会带一个#号，不是太美观。

解决方案二：

修改webpack的配置文件，主要是配置historyApiFallback，这样跳转后在当前页面刷新就不会出现404了。

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: ['.*']
            }
        ])
    ]

解决方案三：

可以在服务器进行设置，在访问路径非根路径是，我们要把根路径下的index.html发送给浏览器，实现让浏览器可以找到页面。