使用useParams时出现Cannot read properties on null(useContext)错误求助

问题原因 #

这个错误的核心是react-router-dom版本不兼容。你的代码采用了v5版本的路由写法（比如使用Switch组件），但如果项目中安装的是v6版本的react-router-dom，路由上下文无法正确传递，就会导致useParams调用时读取到null上下文，触发报错。

解决方案 #

方案1：降级到react-router-dom v5 #

如果想继续沿用现有代码写法，卸载当前版本并安装v5稳定版：

npm uninstall react-router-dom
npm install react-router-dom@5.3.0

方案2：升级代码适配v6版本（推荐） #

v6是当前官方主推的稳定版本，路由写法有调整，修改App.js如下：

import Navbar from './Navbar';
import Home from './Home';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Create from './Create';
import BlogDetails from './BlogDetails';

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <div className="content">
          {/* 用Routes替换原有的Switch */}
          <Routes>
            {/* Route的子组件通过element属性传递 */}
            <Route path="/" element={<Home />} />
            <Route path="/create" element={<Create />} />
            <Route path="/blogs/:id" element={<BlogDetails />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

BlogDetails组件的代码无需修改，v6版本的useParams用法和v5完全一致，修改后即可正常显示URL中的id参数。

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