React应用编译成功后运行出现多个Runtime Error求助

我的React应用编译正常，但运行时出现约8个Runtime Error，页面无法正常渲染。怀疑问题出在导入导出语句，但无法准确定位。以下是核心代码，恳请协助排查解决。

src/components/app/index.js #

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

import { withFirebase } from '../Firebase';

import AuthUserContext 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 * as ROUTES from '../../constants/routes';


class App extends Component {

  constructor (props) {
    super(props);
    this.state = {
      authUser: null,
    };
  }

  // Firebase offers a listener function in order to get the authenticated user from Firebase.
  componentDidMount() {
    this.listner = this.props.firebase.auth.onAuthStateChanged (
      authUser => {
        authUser
          ? this.setState({ authUser })
          : this.setState({ authUser: null });
      }
    );
  }

  componentWillUnmount() {
    this.listner();
  }

  render() {
    return (
      <AuthUserContext.Provider value = {this.state.authUser}>
        <Router>
          <div>
            <div>
              <Navigation authUser={this.state.authUser} />
              <hr />
              <Routes>
                <Route exact path = {ROUTES.LANDING} component = {LandingPage} />
                <Route exact path = {ROUTES.SIGN_UP} component = {SignUpPage} />
                <Route exact path = {ROUTES.SIGN_IN} component = {SignInPage} />
                <Route exact path = {ROUTES.PASSWORD_FORGET} component = {PasswordForgetPage} />
                <Route exact path = {ROUTES.HOME} component = {HomePage} />
                <Route exact path = {ROUTES.ACCOUNT} component = {AccountPage} />
                <Route exact path = {ROUTES.ADMIN} component = {AdminPage} />
              </Routes>
            </div>
          </div>
        </Router>
      </AuthUserContext.Provider>
    );
  }

}

export default withFirebase(App);

src/index.js #

import React from 'react';
import { createRoot } from 'react-dom/client';

import './index.css';
import * as serviceWorker from './serviceWorker';

import App from './components/App';
import Firebase from './components/Firebase';

import FirebaseContext from './components/Firebase/context';

createRoot(document.getElementById('root')).render(
  <FirebaseContext.Provider value={new Firebase()}>
    <App />
  </FirebaseContext.Provider>
);

serviceWorker.unregister();

核心问题排查及修复方案 #

• React Router v6语法不兼容：当前使用react-router-dom v6的Routes组件，但Route仍沿用v5的component属性写法，v6需改为element并传入JSX元素，同时v6默认精准匹配，无需exact属性：

  // 修正后的Route写法
  <Route path={ROUTES.LANDING} element={<LandingPage />} />
  <Route path={ROUTES.SIGN_UP} element={<SignUpPage />} />
  // 其余Route同理修改
  

• 变量拼写错误：componentDidMount中this.listner拼写错误，应为this.listener，否则componentWillUnmount时调用不存在的方法会报错。

• 导入路径大小写不匹配：src/index.js中导入App的路径为./components/App，但实际组件目录是小写的app，在区分大小写的文件系统下会导致导入失败，修正为：

  import App from './components/app';
  

• 导入导出有效性验证：

  • 确认../Firebase中正确导出withFirebase高阶组件；
  • 检查../Session是否正确导出AuthUserContext；
  • 验证./components/Firebase/context是否存在并正确导出FirebaseContext。

内容的提问来源于stack exchange，提问作者Dhruv Pankaj Patel