react打包 npm run build 出现空白页面

打包部署的路由配置

项目执行npm run build后，将打包后的build文件放到 Nginx 配置中。

如果 react-router 路由 使用了 history 模式（即<BrowserRouter>），那么在 Nginx 配置中必须加上:

location / {
        ··· ···
        try_files $uri /index.html;
        ··· ···
        }
    }

如果 react-router 路由 使用了 hash 模式(即<HashRouter>)，那么在 Nginx 中不需要上面的配置。

 

出现空白页面时只要把路径的BrowserRouter改成HashRouter即可