reactjs - 我无法获取 props.match.params.id。据说 Prop 是未定义的

Question

我尝试从 URL 中获取 id(使用 props.match.params.id)并将其传递到一个变量中以重新使用它。但是 props 是未定义的。我不知道为什么。

任何人都可以看到我是否做错了什么？

import React, { useState, useEffect } from "react";
import axios from "axios";

export default function Recipes() {
  const [recipes, setRecipes] = useState([]);
  useEffect(() => {
    const id = props.match.params.id;
    const getRecipes = async () => {
      const url = `http://localhost:8000/user/recipes/${id}`;
      const result = await axios.get(url);

      setRecipes(result.data);
      console.log("test", recipes);
    };
    getRecipes();
  }, []);

  return (
    <div>
      {recipes.map(recipe => (
        <p>{recipe.title}</p>
      ))}
    </div>
  );
}

Answer 1

为此，您需要使用 react-router-dom 中的 useParams Hook 。

试试这个:

...
import { useParams } from 'react-router-dom'

export default function Recipes() {
  ...
  const { id } = useParams()
  
  useEffect(() => {
    ...
  }, [id])
  ...
}