React-router中使用BrowserRouter跳轉后刷新出現404問題的解決（day02）

問題引入

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發送給瀏覽器，實現讓瀏覽器可以找到頁面。