React项目npm start后白屏，组件命名警告求助

根据你提供的代码和控制台警告，我定位到两个关键问题导致了白屏和警告提示：

1. React组件命名大小写错误（警告核心来源） #

在src/components/Firebase/context.js的WithFirebase高阶组件中，你使用了小写的<component>标签。React的规则是：自定义组件必须以大写字母开头，小写标签会被React识别为原生HTML标签（这类标签在浏览器中不存在），最终导致组件无法渲染，进而引发白屏。

修复代码： #

修改src/components/Firebase/context.js中的WithFirebase函数：

import React from 'react';
const FirebaseContext = React.createContext(null);
export const WithFirebase = Component => props => (
  <FirebaseContext.Consumer>
    {/* 将小写的component改为大写的Component */}
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);
export default FirebaseContext;

2. React Router使用错误 #

在src/components/App/index.js中，你导入了Router组件但没有传入必需的history属性，同时又导入了HashRouter却未实际使用。React Router v5中，Router是底层基础组件，必须配合history对象才能工作；而HashRouter/BrowserRouter是封装好的、自带history的路由容器，更适合直接用于项目中。

修复代码： #

修改src/components/App/index.js的导入和路由容器：

import React from 'react';
// 直接导入HashRouter并别名成Router，简化后续使用
import { HashRouter as Router, Route, Link} from "react-router-dom";
import * as ROUTES from '../../constants/routes';
import { withAuthentication } from '../Session';
import Navigation from '../Navigation';
import LandingPage from '../Landing';
import SignUpPage from '../SignUp';
import SignInPage from '../SignIn';
import PasswordForgetPage from '../PasswordForget';
import HomePage from '../Home';
import AccountPage from '../Account';
import AdminPage from '../Admin';
import { AuthUserContext } from '../Session';

const App = () => (
  <Router>
    <div>
      <Navigation />
      <hr />
      <Route exact path={ROUTES.LANDING} component={LandingPage} />
      <Route path={ROUTES.SIGN_UP} component={SignUpPage} />
      <Route path={ROUTES.SIGN_IN} component={SignInPage} />
      <Route path={ROUTES.PASSWORD_FORGET} component={PasswordForgetPage} />
      <Route path={ROUTES.HOME} component={HomePage} />
      <Route path={ROUTES.ACCOUNT} component={AccountPage} />
      <Route path={ROUTES.ADMIN} component={AdminPage} />
    </div>
  </Router>
);

export default withAuthentication(App);

修复后验证 #

完成以上修改后，重新运行npm start，控制台的组件未识别警告会消失，页面也能正常渲染内容。这两个问题分别导致了组件无法正确挂载、路由容器失效，共同引发了白屏现象。

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