How to use match.params.id in react router v6

Question

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

will [this help](https://stackoverflow.com/q/64782949/11737596) ? — KcH, Nov 19 '22 at 17:52
If the error is something to do with reading a "path" in a `matchPath` utility, why are you asking about `match.params.id`? Can you edit the post to include the complete error message and the accompanying code stacktrace? A more complete [mcve] would also be helpful to see what is going on around this code and the code that is possibly generating the error. Also, careful using `date` as a dependency since you are updating that state in the effect. — Drew Reese, Nov 22 '22 at 10:37

score 0 · Accepted Answer · answered Nov 19 '22 at 17:56

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 />} />

hye bro you are great thanks alot bro keep growing Tarun Bisht — Rohan Ghosh, Nov 19 '22 at 18:13

How to use match.params.id in react router v6

1 Answers1