UseParams hook in React keeps returning undefined - reactjs

Question

I'm just making a practice recipe app that uses a GET request to show recipes which I'm mapping through into their own individual Recipe components so I can give each an edit & delete button. For some reason, I thought I setup useParams correctly as well as matched the dynamic :id with what I extracted into the useParams hook aka { id } but it keeps popping up undefined. Everything else setup with Redux has been working without errors.
Here is my App.js file:
import { Route, BrowserRouter, Switch } from "react-router-dom";
import Recipe from "./Recipe";
import Recipes from "./Recipes";
function App() {
return (
<div className="App">
<BrowserRouter>
<Switch>
<Route path='/recipes/:id' component={Recipe} />
<Route exact path='/recipes' component={Recipes} />
</Switch>
</BrowserRouter>
</div>
);
}
export default App;
and here is my Recipe.js file:
import { useDispatch } from 'react-redux';
import { deleteRecipe } from './actions';
import { Link, useParams } from 'react-router-dom';
function Recipe({ recipe }) {
const dispatch = useDispatch();
let { id } = useParams();
console.log('id:', id);
const handleDelete = (id) => {
dispatch(deleteRecipe(id));
}
return (
<div>
<Link to={`/recipes/${id}`}>
<h5>{recipe.title}</h5>
<button onClick={handleDelete}>Delete</button>
</Link>
</div>
)
}
export default Recipe

Answer 1

It looks like you are in the Recipe show method trying to Link to another Recipe show. You will need to use the Recipes component, with a Link that houses the dynamic/static id. Then you can call useParams to get that id.
Example here from previous answer.