[FIXED] How to use match.params.id in react router v6

Issue

Error:
Uncaught TypeError: Cannot read properties of undefined (reading 'path') at 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]);

Solution

Use useParams() from react-router-dom

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]);
}

in your Route

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

Answered By - Tarun Bisht
Answer Checked By - - Candace Johnson (ReactFix Volunteer)