How to fix problems with navigating to different pages by ID in a React app? - reactjs

Question

I am having trouble navigating to different pages based on ID. I am making a recipe app with the MERN Stack.
I keep getting errors like No routes matched location "/api/recipes/61f9626a6b8d175f6b6dc725"
Here is my code:
App.js
import React from 'react';
import {BrowserRouter as Router, Route, NavLink, Routes} from 'react-router-dom';
import './App.css';
import Home from './components/pages/Home';
import RecipeList from './components/recipes/RecipeList';
import RecipeInfo from './components/recipes/RecipeInfo';
import RecipeAdd from './components/recipes/RecipeAdd';
import RecipeEdit from './components/recipes/RecipeEdit';
function App() {
return (
<div className="App">
<Router>
<Navigation />
<div className="container">
<Main />
</div>
</Router>
</div>
);
}
function Navigation() {
return(
<nav className="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
<div className='container'>
<ul className="navbar-nav mr-auto">
<li className="nav-item"><NavLink exact="true" className="nav-link" to="/">Home</NavLink></li>
<li className="nav-item"><NavLink exact="true" className="nav-link" to="/recipes">Recipes</NavLink></li>
</ul>
</div>
</nav>
);
}
function Main() {
return(
<Routes>
<Route path="/recipes" element={<RecipeList />} />
<Route path="/recipes/new" element={<RecipeAdd />} />
<Route path="/recipes/:id" element={<RecipeInfo />} />
<Route path="/recipes/:id/edit" element={<RecipeEdit />} />
<Route exact path="/" element={<Home />} />
</Routes>
);
}
export default App;
RecipeInfo.js
import React, { useState, useEffect } from "react";
import axios from 'axios';
import { Link, useParams, useNavigate } from 'react-router-dom';
function RecipeInfo(props) {
const [recipe, setRecipe] = useState({});
const { _id } = useParams();
const navigate = useNavigate();
useEffect(function() {
async function getRecipe() {
try {
const response = await axios.get(`/api/recipes/${_id}/`);
setRecipe(response.data);
} catch(error) {
console.log('error', error);
}
}
getRecipe();
}, [props, _id]);
async function handleDelete() {
try {
await axios.delete(`/api/recipes/${_id}/`);
navigate("/api/recipes");
} catch(error) {
console.error(error);
}
}
return (
<div>
<h2>{recipe.title}</h2>
<small>_id: {recipe._id}</small>
<p>{recipe.ingredients}</p>
<p>{recipe.procedure}</p>
<div className="btn-group">
<Link to={`/api/recipes/${recipe._id}/edit`} className="btn btn-primary">Edit</Link>
<button onClick={handleDelete} className="btn btn-danger">Delete</button>
<Link to="/api/recipes" className="btn btn-secondary">Close</Link>
</div>
<hr/>
</div>
);
};
export default RecipeInfo;
Server.js
const express = require('express');
const mongoose = require('mongoose');
// const cors = require('cors');
const router = require('./routes/index');
const app = express();
const PORT = 3001;
const MONGODB_URI = "mongodb://localhost:27017/recipeDB";
// app.use(cors())
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use('/api', router);
mongoose.connect(MONGODB_URI, {});
mongoose.connection.once('open', function() {
console.log('Connected to the Database.');
});
mongoose.connection.on('error', function(error) {
console.log('Mongoose Connection Error: ' + error);
});
app.listen(PORT, function() {
console.log(`Server listening on port ${PORT}.`);
});
I am also getting an error saying error TypeError: Cannot read properties of undefined (reading 'push') at postRecipe (RecipeAdd.js:23:1) Here is the code for that file.
RecipeAdd.js
import React, { useState } from "react";
import { post } from 'axios';
import { useNavigate } from "react-router-dom";
function RecipeAdd(props) {
const initialState = { title: '', content: '' }
const [recipe, setRecipe] = useState(initialState)
const navigate = useNavigate();
function handleChange(event) {
setRecipe({...recipe, [event.target.name]: event.target.value})
}
function handleSubmit(event) {
event.preventDefault();
if(!recipe.title || !recipe.ingredients || !recipe.procedure) return
async function postRecipe() {
try {
const response = await post('/api/recipes', recipe);
props.history.push(`/recipes/${response.data._id}`);
} catch(error) {
console.log('error', error);
}
}
postRecipe();
navigate("/recipes")
}
function handleCancel() {
navigate("/recipes");
}
return (
<div>
<h1>Create Recipe</h1>
<hr/>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label>Title</label>
<input name="title" type="text" value={recipe.title} onChange={handleChange} className="form-control" />
</div>
<div className="form-group">
<label>Ingredients</label>
<textarea name="ingredients" rows="5" value={recipe.ingredients} onChange={handleChange} className="form-control" />
</div>
<div className="form-group">
<label>Procedure</label>
<textarea name="procedure" rows="5" value={recipe.procedure} onChange={handleChange} className="form-control" />
</div>
<div className="btn-group">
<input type="submit" value="Submit" className="btn btn-primary" />
<button type="button" onClick={handleCancel} className="btn btn-secondary">Cancel</button>
</div>
</form>
</div>
);
}
export default RecipeAdd;
I am fairly new to React, so any advice or best practices I could be doing would be greatly appreciated. Thanks!

Answer 1

Those errors seems to be valid.
Normal navigation around the app do not need to have /api/* before. Reason I think is because these are API routes and not navigation routes.
RecipeInfo.js
...
async function handleDelete() {
try {
await axios.delete(`/api/recipes/${_id}/`);
navigate("/recipes");
} catch(error) {
console.error(error);
}
}
...
return (
...
<Link to={`/recipes/${recipe._id}/edit`} className="btn btn-primary">Edit</Link>
<button onClick={handleDelete} className="btn btn-danger">Delete</button>
<Link to="/recipes" className="btn btn-secondary">Close</Link>
...
)
...
For the type error. Consider using navigate for routing instead of props being passed.
RecipeAdd.js line 23
// props.history.push(`/recipes/${response.data._id}`);
navigate(`/recipes/${response.data._id}`);