基于Parcel构建的React应用部署到Github Pages后无法渲染如何解决

• 修正package.json中的两处错误配置：
  1. homepage字段填写为线上站点地址，而非Github仓库地址
  2. 新增Parcel生产构建命令build，并修正predeploy的调用逻辑，生产构建同样需要指定和开发环境一致的public-url参数
     修正后的相关配置如下：

{
  "name": "pet-adoption-app",
  "version": "1.0.0",
  "homepage": "https://junaidshaikh-js.github.io/pet-adoption-app/",
  "scripts": {
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
    "dev": "parcel src/index.html --public-url /pet-adoption-app/",
    "build": "parcel build src/index.html --public-url /pet-adoption-app/",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  }
}

• 若项目使用了react-router-dom的BrowserRouter路由组件，需要添加basename属性匹配站点子路径：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter basename="/pet-adoption-app">
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

• 本地执行npm run build确认dist目录构建无报错后，重新执行npm run deploy推送部署即可。

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