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即可