React Router Dom链接无法使用，报错Cannot read properties of null (reading 'useRef')

• 检查版本兼容性
  这个报错大多是React和react-router-dom版本不匹配导致的。React 18必须搭配react-router-dom v6及以上版本，React 17及以下则对应v5版本。可以用以下命令重装适配的版本：

  # React 18 适配最新版v6
  npm install react-router-dom@latest
  # React 17及以下适配v5
  npm install react-router-dom@5.3.0
  

• 确保Router包裹整个应用
  所有用到Link、Routes等路由组件的部分，必须被Router（比如BrowserRouter）包裹。根组件结构要像这样：

  import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
  import Home from './Home';
  import About from './About';
  
  function App() {
    return (
      <Router>
        <nav>
          <Link to="/">首页</Link>
          <Link to="/about">关于</Link>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Router>
    );
  }
  
  export default App;
  

  绝对不能在Router外部使用路由相关组件，否则必然触发这个错误。

• 避免在类组件中使用v6的路由API
  react-router-dom v6的所有路由功能都是基于Hook实现的，类组件无法直接使用。如果还在维护类组件，要么改成函数组件，要么降级到v5版本（v5支持withRouter高阶组件适配类组件）。

• 清理依赖缓存重装
  依赖缓存异常也可能引发这类问题，执行以下命令重置依赖：

  rm -rf node_modules package-lock.json
  npm install
  

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