React - I get error 404 from the server although the server working - react-router

Question

I created cards and I added to evrey card the option mark like but I want that after the client mark like in some card, this card will save in another page of favorites. So I wrote the next codes and from some reson I get error 404 from the server (GET /api/cards/my-favorite-cards 404 4.389 ms)
MyFavoriteCard.jsx:
import React from "react";
import PageHeader from "../common/pageHeader";
import CardExtends from "../common/Cards/CardExtends";
import Cards from "../common/Cards/cards";
import { Navigate } from "react-router-dom";
import { getMyFavorite } from "../../services/cardService";
class Fav extends CardExtends {
state = {
data: [],
cards: [],
isMount: false,
};
async componentDidMount() {
try {
const { data } = await getMyFavorite();
this.setState({ data, cards: data, isMount: true });
} catch (error) {
console.log(error.message);
}
}
render() {
const { user } = this.props;
if (!user || (user && !user.biz)) return <Navigate replace to="/" />;
const cards = [...this.state.cards];
// const { isMount } = this.state;
// if (!isMount) return null;
return (
<React.Fragment>
<PageHeader
title="My Favorite Cards"
subTitle="Here you can find your favorite cards"
/>
<div className="container">
<Cards
cards={cards}
handleDelete={this.handleDelete}
changeLikeStatus={this.changeLikeStatus}
/>
</div>
</React.Fragment>
);
}
}
export default Fav;
cardService.js:
import http from "./httpService";
const apiUrl = process.env.REACT_APP_API_URL;
export const getCard = (cardId) => http.get(`${apiUrl}/cards/card/${cardId}`);
export const getCards = () => http.get(`${apiUrl}/cards/cards`);
export const getMyCards = () => http.get(`${apiUrl}/cards/my-cards`);
export const createCard = (card) => http.post(`${apiUrl}/cards/`, card);
export const deleteCard = (cardId) => http.delete(`${apiUrl}/cards/${cardId}`);
export const editCard = (card) => http.put(`${apiUrl}/cards/${card._id}`, card);
export const changeLikeStatus = async (cardId) =>
http.patch(`${apiUrl}/cards/card-like/${cardId}`);
export const getMyFavorite = () =>
http.get(`${apiUrl}/cards/my-favorite-cards`);
App.js:
import HomePage from "./layout/main/Home";
import About from "./layout/main/About.jsx";
import { Routes, Route } from "react-router-dom";
import Error404 from "./layout/main/Error404";
import Header from "./layout/header/Header.jsx";
import Footer from "./layout/footer/footer.jsx";
import BizSignup from "./layout/main/BizSignup";
import Logout from "./layout/main/Logout";
import MyCards from "./layout/main/MyCards";
import MyFavoriteCards from "./layout/main/MyFavoriteCards";
import Login from "./layout/main/Login";
import Signup from "./layout/main/Signup";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { getCurrentUser } from "./services/userService";
import CreateCard from "./layout/main/CreateCard";
import EditCardConvertor from "./layout/main/editCardConvertor";
import CardDetails from "./layout/main/CardDetails";
import CardDetailsConvertor from "./layout/main/CardDetailsConvertor";
function App() {
const user = getCurrentUser();
return (
<div className="App">
<Header user={user} />
<ToastContainer />
<main style={{ minHeight: "85vh" }}>
<Routes>
<Route path="/about" element={<About />} />
<Route path="/biz-signup" element={<BizSignup />} />
<Route path="/logout" element={<Logout />} />
<Route path="/my-cards" element={<MyCards user={user} />} />
<Route path="/create-card" element={<CreateCard user={user} />} />
<Route
path="/card-details-converotr"
element={<CardDetailsConvertor user={user} />}
/>
<Route
path="/edit-card/:id"
element={<EditCardConvertor user={user} />}
/>
<Route
path="/card-details/:id"
element={<CardDetails user={user} />}
/>
<Route
path="/my-fav-cards"
element={<MyFavoriteCards user={user} />}
/>
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
<Route path="/" element={<HomePage />} />
<Route path="*" element={<Error404 />} />
</Routes>
</main>
<Footer />
</div>
);
}
export default App;
cardsRouter.js
router.get("my-fav-cards", auth, async (req, res) => {
try {
const { _id } = req.user;
const favoriteCards = await Card.find({ likes: _id });
return res.send(favoriteCards);
} catch (error) {
console.log(chalk.redBright("Error: You can't save", error.message));
return res.status(500).send(error.message);
}
});
I would happy to know what the problem
Thnak you
Important to know: the page is exsit, there is title and subtitle in the page, but the card arent appear in the page.