React路由使用时触发多个错误的排查求助

问题核心 #

你遇到的Cannot read properties of null (reading 'useRef')错误，本质是BrowserRouter内部使用的Hook无法正常访问React上下文，触发了Hook规则错误——虽然你自己没写useRef，但react-router-dom的组件依赖Hook运行，一旦React环境出问题就会报错。结合错误提示的三个原因，以下是具体解决步骤：

解决步骤 #

1. 统一React、React DOM和React Router DOM的版本 #

React和React DOM必须严格同版本，同时react-router-dom要和React版本兼容（比如v6要求React 16.8及以上）：

• 先查看当前版本：

  npm list react react-dom react-router-dom
  

• 如果版本不匹配或过低，重新安装最新兼容版本：

  npm install react@latest react-dom@latest react-router-dom@latest
  

2. 清理重复的React依赖 #

项目中存在多份React副本是常见诱因：

• 执行依赖去重命令：

  npm dedupe
  

• 如果无效，彻底重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

3. 修正路由组件的写法（针对React Router v6） #

如果你安装的是react-router-dom v6，旧版v5的component属性写法已经废弃，虽然这不是直接导致Hook错误的原因，但可能引发其他问题，建议同步修正：
修改App.js为：

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import LandingPage from './components/LandingPage';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<LandingPage />} />
        {/* 其他路由 */}
      </Routes>
    </Router>
  );
};

export default App;

4. 确认组件的Hook使用规则 #

虽然你的代码都是函数组件，但额外确认：

• 所有组件都是函数组件或自定义Hook，没有在类组件内部使用路由组件
• 路由组件没有被嵌套在普通JavaScript函数中（必须直接放在函数组件的顶层作用域）

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