React项目出现Cannot read properties of null (reading 'useRef')错误求助

我是编程新手，正在为训练营开发一款"bad bank"应用。因教授视频中的render方法已过时，我改用了新的render方法，却遇到了Cannot read properties of null (reading 'useRef')错误，且该错误导致React应用中的导航栏无法显示。

错误信息 #

Cannot read properties of null (reading 'useRef')
TypeError: Cannot read properties of null (reading 'useRef')
at Object.useRef (http://localhost:3001/static/js/bundle.js:50918:25)
at HashRouter (http://localhost:3001/static/js/bundle.js:47317:55)
at renderWithHooks (http://localhost:3001/static/js/bundle.js:22502:22)
at mountIndeterminateComponent (http://localhost:3001/static/js/bundle.js:25788:17)
at beginWork (http://localhost:3001/static/js/bundle.js:27084:20)
at HTMLUnknownElement.callCallback (http://localhost:3001/static/js/bundle.js:12094:18)
at Object.invokeGuardedCallbackDev (http://localhost:3001/static/js/bundle.js:12138:20)
at invokeGuardedCallback (http://localhost:3001/static/js/bundle.js:12195:35)
at beginWork$1 (http://localhost:3001/static/js/bundle.js:32069:11)
at performUnitOfWork (http://localhost:3001/static/js/bundle.js:31316:16)

现有代码（index.js） #

import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter, Route } from 'react-router-dom';
import{CreateAccount} from './createaccount.js';
import{Home} from './home.js';
import{Login} from './login.js';
import{Withdraw} from './withdraw.js';
import{Balance} from './balance.js';
import{AllData} from './alldata.js';
import{Deposit} from './deposit.js';
import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';
import{NavBar} from './navbar.js'


const UserContext = React.createContext(null);

const rootElement = 
document.getElementById('root');
const root = 
createRoot(rootElement);

function Spa() {
  return (
    <HashRouter>
      
      <NavBar/>
      <UserContext.Provider value={{users:[{name:'abel',email:'abel@mit.edu',password:'secret',balance:100}]}}>
        <div className="container" style={{padding: "20px"}}>
          <Route path="/" exact component={Home} />
          <Route path="/CreateAccount/" component={CreateAccount} />
          <Route path="/login/" component={Login} />
          <Route path="/deposit/" component={Deposit} />
          <Route path="/withdraw/" component={Withdraw} />
          <Route path="/balance/" component={Balance} />
          <Route path="/alldata/" component={AllData} />
        </div>
      </UserContext.Provider>      
    </HashRouter>

  );
};

root.render(
  <StrictMode>
    <Spa />
  </StrictMode>,
);

解决方案 #

这个错误主要是React Router版本不兼容和过时的Route API使用导致的，按以下步骤修复：

1. 升级React Router到v6版本
   React 18的createRoot与react-router-dom v5及以下版本存在兼容问题，执行命令升级：

   npm install react-router-dom@latest
   

2. 修正Route组件的写法
   React Router v6移除了component属性，需改用element传入JSX元素，同时exact属性也已被移除（默认精确匹配根路径）：
   修改Spa组件中的Route部分：

   <div className="container" style={{padding: "20px"}}>
     <Route path="/" element={<Home />} />
     <Route path="/CreateAccount/" element={<CreateAccount />} />
     <Route path="/login/" element={<Login />} />
     <Route path="/deposit/" element={<Deposit />} />
     <Route path="/withdraw/" element={<Withdraw />} />
     <Route path="/balance/" element={<Balance />} />
     <Route path="/alldata/" element={<AllData />} />
   </div>
   

3. 确认根元素存在
   检查public/index.html文件中是否包含id为root的div元素：

   <div id="root"></div>
   

4. 简化冗余代码（可选）
   移除重复导入的ReactDOM，保留createRoot即可：

   // 移除该行：import ReactDOM from 'react-dom/client';
   import { createRoot } from 'react-dom/client';
   

修复后的完整index.js代码 #

import React from 'react';
import { HashRouter, Route } from 'react-router-dom';
import { CreateAccount } from './createaccount.js';
import { Home } from './home.js';
import { Login } from './login.js';
import { Withdraw } from './withdraw.js';
import { Balance } from './balance.js';
import { AllData } from './alldata.js';
import { Deposit } from './deposit.js';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { NavBar } from './navbar.js'


const UserContext = React.createContext(null);

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

function Spa() {
  return (
    <HashRouter>
      <NavBar/>
      <UserContext.Provider value={{users:[{name:'abel',email:'abel@mit.edu',password:'secret',balance:100}]}}>
        <div className="container" style={{padding: "20px"}}>
          <Route path="/" element={<Home />} />
          <Route path="/CreateAccount/" element={<CreateAccount />} />
          <Route path="/login/" element={<Login />} />
          <Route path="/deposit/" element={<Deposit />} />
          <Route path="/withdraw/" element={<Withdraw />} />
          <Route path="/balance/" element={<Balance />} />
          <Route path="/alldata/" element={<AllData />} />
        </div>
      </UserContext.Provider>      
    </HashRouter>
  );
};

root.render(
  <StrictMode>
    <Spa />
  </StrictMode>
);

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