如何在反應路由器 v6 中使用 match.params.id

Question

錯誤：
未捕獲的類型錯誤：無法在 matchPath (utils.ts:622:1) 處讀取未定義的屬性（讀取“路徑”）

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

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

    fetching();
  }, [match.params.id, date]);

Answer 1

使用來自 react-router-dom 的 useParams()

import { useParams } from "react-router-dom";

const Component =()=>{
  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, date]);
}

在你的路線

<Route exact path="/user/:id" element={<Component />} />