Create React App创建项目运行yarn start出现空白页如何解决

现有代码错误修复（该问题为导致空白页的首要原因） #

你提供的主题切换代码存在React语法规范错误，优先修复后再排查其他问题：

• React要求所有自定义组件名必须首字母大写，你当前的app类组件、themeSwitcher函数组件均为小写，会被React识别为原生HTML标签，不会渲染内容
• Context的Provider、Consumer属性首字母必须大写，你写的themeContext.provider、themeContext.consumer为错误写法

修复后代码 #

context.js

import React from "react";
// 变量名首字母大写符合React规范
export const ThemeContext = React.createContext({
    Theme: "light",
    changeTheme: () => {}
});

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import './app.css';
import { ThemeContext } from './context.js';

// 组件名首字母大写
function ThemeSwitcher(){
    return (
        <ThemeContext.Consumer>
            {({Theme,changeTheme}) => (
                <input
                    type="checkbox"
                    checked={Theme === "dark"}
                    onChange={() => changeTheme(Theme === "dark" ? "light" : "dark")}
                />
            )}
        </ThemeContext.Consumer>
    );
}

// 组件名首字母大写
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            Theme: "light",
            changeTheme: this.changeTheme
        };
    }
    changeTheme = (Theme) => {
        this.setState({
            Theme
        });
    };

    render() {
        return (
             <ThemeContext.Provider value={this.state}>
                  <div>
                      <p>this is a switcher theme</p>
                      <span>Dark mode</span>
                      <ThemeSwitcher />
                  </div>
             </ThemeContext.Provider>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

空白页通用排查步骤 #

• 打开浏览器控制台（F12）查看红框报错：所有语法错误、依赖缺失、DOM节点不存在的问题都会在控制台明确提示，优先解决所有报错
• 检查public/index.html文件中是否存在<div id="root"></div>节点：如果手动修改过该文件误删了根节点，会导致React无法挂载内容
• HashRouter配置仅针对路由场景：只有你使用了react-router且打包后部署在非域名根目录时才需要修改，本地yarn start启动开发服务时不需要配置，具体操作方法为：
  1. 安装依赖：yarn add react-router-dom
  2. 入口文件包裹App组件：

  import { HashRouter } from 'react-router-dom'
  ReactDOM.render(<HashRouter><App /></HashRouter>, document.getElementById('root'))
  

• homepage: "."是打包部署配置：该参数仅作用于yarn build打包后的产物，本地开发启动时不生效，不会导致本地空白页
• 清理缓存重启服务：删除项目下的node_modules文件夹、yarn.lock文件，执行yarn install重新安装依赖后再运行yarn start

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