执行npm run build后React页面空白，疑因react-router-dom导致

这个问题我之前也碰到过，核心原因是BrowserRouter依赖HTML5 History API，而你直接打开build后的index.html用的是file://协议，这种协议下History API没法正常工作，导致路由解析失败，页面就空白了。给你几个可行的解决方案：

方案1：用本地HTTP服务器运行build文件夹 #

直接打开静态文件不行，但用HTTP服务器托管build目录就能正常处理路由了，推荐用serve工具：

• 先全局安装serve：

  npm install -g serve
  

• 进入项目根目录，运行命令启动服务器：

  serve -s build
  

• 然后访问终端提示的地址（一般是http://localhost:3000），这时候所有路由都会正常工作，和npm start的效果一致。

方案2：部署到静态服务器时配置路由 fallback #

如果是要部署到Nginx、Apache这类生产服务器，需要配置让所有路由请求都 fallback 到index.html，这样React Router才能接管路由解析：

Nginx配置示例 #

在你的Nginx站点配置里添加：

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

Apache配置示例 #

在项目根目录（或build目录）创建.htaccess文件，内容如下：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

方案3：改用HashRouter替代BrowserRouter #

如果不想依赖HTTP服务器，也可以把路由改成Hash模式，这种模式下路由会带#前缀，file://协议也能正常解析：
修改你的index.js代码：

import React from 'react';
import ReactDOM from 'react-dom';
// 把BrowserRouter换成HashRouter
import {HashRouter as Router, Route, Switch} from "react-router-dom"
import './css/bootstrap.min.css';
import './css/style.css';
// Pages
import Library from './pages/Library.js'
import Register from './pages/Register.js'
ReactDOM.render(
  <div>
    <Router>
      <Switch>
        <Route exact path="/" component={Library}/>
        <Route exact path="/library" component={Library}/>
        <Route exact path="/register" component={Register}/>
      </Switch>
    </Router>
  </div>,
  document.getElementById('root')
)

修改后重新npm run build，直接打开index.html就能看到页面了，访问路径会变成localhost:3000/#/library这种形式。

内容的提问来源于stack exchange，提问作者stupidwebsite