I use React and Axios for API requests.

I have a problem with an API request; I get:

Cannot GET /posts/byId/1

When I do a GET at http://localhost:3002/posts/byId/1, while all my other requests work.

Does anyone have a solution?

My Routes :

const express = require('express');
const router = express.Router();
const { Posts } = require('../models');

router.get('/', async (req, res) => {
    const listOfPosts = await Posts.findAll();
    res.json(listOfPosts);
});

router.get('/byId/:id', async (req, res) => {
    const id = req.params.id;
    const post = await Posts.findByPk(id);
    res.json(post);
});

router.post('/', async (req, res) => {
    const post = req.body;
    await Posts.create(post);
    res.json(post);
});

module.exports = router;

My App.js :

import './App.css';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import CreatePost from './pages/CreatePost';
import Post from './pages/Post';

function App() {
    return (
        <div className="App">
            <Router>
                <div className="navbar">
                    <Link to="createPost"> Create A Post </Link>
                    <Link to="/"> Home Page </Link>
                </div>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/createPost" element={<CreatePost />} />
                    <Route path="/post/:id" element={<Post />} />
                </Routes>
            </Router>
        </div>
    );
}

export default App;

My Post.js :

import React, { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';

function Post() {
    let { id } = useParams();

    useEffect(() => {
        axios.get(`http://localhost:3002/posts/byId/${id}`).then((response) => {});
    });

    return <div>{id}</div>;
}

export default Post;