React Router v6中如何使用match.params.id？附报错及代码示例

你遇到的报错是因为React Router v6彻底移除了旧版本中通过match对象获取路由参数的方式，直接访问match会导致它为undefined，进而触发Cannot read properties of undefined错误。

正确实现步骤： #

• 从react-router-dom中导入专门用于获取路由参数的useParams钩子
• 在组件内部调用useParams()并解构出id参数
• 用解构得到的id替代原代码中的match.params.id

修正后的完整代码： #

import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';
import axios from 'axios';

const NoteDetail = () => {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [category, setCategory] = useState('');
  const [date, setDate] = useState('');
  
  // 从路由参数中获取id
  const { id } = useParams();

  useEffect(() => {
    const fetching = async () => {
      const { data } = await axios.get(`/api/notes/${id}`);

      setTitle(data.title);
      setContent(data.content);
      setCategory(data.category);
      setDate(data.updatedAt);
    };

    fetching();
  }, [id]); // 仅保留id作为依赖项，避免因date状态更新导致无限循环

  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
      <span>{category}</span>
      <time>{date}</time>
    </div>
  );
};

export default NoteDetail;

额外注意： #

确保你的路由配置中包含:id动态参数，与useParams解构的参数名一致：

import { Routes, Route } from 'react-router-dom';
import NoteDetail from './NoteDetail';

function App() {
  return (
    <Routes>
      <Route path="/notes/:id" element={<NoteDetail />} />
    </Routes>
  );
}

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