React Router v6报错：Cannot read properties of undefined (reading 'path')

先看你遇到的错误：

错误提示：useParams() 只能在 <Router> 组件的上下文环境中使用。

你的代码里犯了这几个错： #

• 路由钩子用错地方了：useParams、useMatch 这些React Router的钩子，必须放在被 <Router> 包裹的组件里面用，你现在直接在Router外面调用，根本没在路由上下文里，肯定报错。
• Route组件写法不对：v6里的<Route>不能直接把内容当子元素写，必须用element属性指定要渲染的东西。
• useMatch调用错了：v6的useMatch必须传具体路径，比如useMatch("/books/:id")，不能空着调用；而且你要拿id参数，直接用useParams就够了，没必要用useMatch。
• 漏了useState的导入：你用了useState但没从react里导入，运行起来还会有另一个错误。

改好的代码是这样的： #

import { useParams, Route, Routes, BrowserRouter as Router } from 'react-router-dom';
import { useState } from 'react'; // 补上useState的导入

// 把详情内容拆成单独组件，确保钩子在Router内部
function BookDetail() {
  const { id } = useParams();
  const [book, setBook] = useState(null);

  // 这里可以加个useEffect根据id拉取书籍数据
  // useEffect(() => {
  //   fetch(`/api/books/${id}`)
  //     .then(res => res.json())
  //     .then(data => setBook(data));
  // }, [id]);

  return <h4>{book && book.title}</h4>;
}

function App() {
  return (
    <Router>
      <Routes>
        {/* 用element属性挂载组件，定义带参数的路由 */}
        <Route path="/books/:id" element={<BookDetail />} />
      </Routes>
    </Router>
  );
}

export default App;

额外提醒： #

所有React Router的钩子（useParams、useNavigate这些）都得在<Router>的子组件里用，不能在Router外面瞎调用。如果要复用路由路径，再考虑用useMatch传具体路径，一般拿参数用useParams就够了。

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