I'm getting a 404 on the Cards page

const express = require('express');
const router = express.Router();
const { data } = require('../data/flashcardData.json');
const { cards } = data;

router.get('/:id', (req, res) => 
{
    res.render('card', {
                            prompt: cards[req.params.id].question, 
                            hint: cards[req.params.id].hint
                        });
});

module.exports = router;

const express = require('express');
const router = express.Router();

//Testing the Middleware...
router.use(
    (req, res, next) => { 
      console.log('Testing the Middleware...');
      next(); 
    });

let firstNames = ["Leban", "Hanad", "Abdi", "Shogo", "Mikako" ];

let lastNames = ["Mohamed", "Afrah", "Afrah", "Kanemoto", "Sunagawa"];

//Main Registration
router.get('/', (req, res) => {
    const name = req.cookies.name;
    if(name)
    {
        res.render('index', {name});
    }

    else
    {
        res.redirect('hello');
    }


});


//Practice for the tables
router.get('/practice', (req, res) => {res.render('tablepractice', {firstNames, lastNames})})

//Get cookies from the hello page
router.get('/hello', (req, res) => {
    res.render('hello', {name: req.cookies.name}); 
});

//
router.post('/hello', (req, res) => {
    res.cookie('name', req.body.name);
    res.redirect('/');

});

//Goodbye button
router.post('/goodbye', (req, res) => 
{
    res.clearCookie('name');
    res.redirect('/hello')
});

module.exports = router;

const express = require('express');

const bodyParser = require('body-parser');

const cookieParser = require('cookie-parser');


const app = express();

app.use(bodyParser.urlencoded({ extended: false}));
app.use(cookieParser());

app.set('view engine', 'pug');

const mainRoutes = require('./routes');
const cardRoutes = require('./routes/cards');


app.use(mainRoutes);
app.use('/cards', cardRoutes);

//Goodbye Action


app.use((req, res, next) => 
{
    const err = new Error("Sorry, but the page you're looking for is in another castle!");
    err.status = 404;
    next(err);
})

app.use((req, res, next) => 
{
    const err = new Error("Something's wrong with the page. Leban's hard at work making a fix. So go watch a Youtube video or something.");
    err.status = 500;
    next(err);
})



app.use((err, req, res, next) => 
{
    res.locals.error = err;
    res.status(err.status);
    res.render('error', err);
})

app.listen(3000, () => {
    console.log("The console is currently running on localhost:3000")
});

{
    "data":{
        "title": "Leban's Fantastic Flash Cards!",
        "cards": [
            {
                "Question": "What arcade game did Mario make his first appearance?",
                "Hint": "He was jumping over barrels",
                "Answer": "Donkey Kong (1981)"
            },

            {
                "Question": "What programming language works with Express",
                "Hint": "Starts with a \"J\"",
                "Answer": "JavaScript"
            },

            {
                "Question": "What is the Capital of Rhode Island",
                "Hint": "Prov...",
                "Answer": "Providence"
            },

            {
                "Question": "Which Canadian Prime Minister was elected, only to be trounced within a year?",
                "Hint": "Joe Who?",
                "Answer": "Joe Clark"
            },

            {
                "Question": "What year was Leban Mohamed born?",
                "Hint": "Bill Clinton was inaugurated on this year for his 1st term.",
                "Answer": "1993"
            },

            {
                "Question": "Who composed the music for Sonic the Hedgehog 2?",
                "Hint": "Leader of Dreams Come True",
                "Answer": "Masato Nakamura"
            },

            {
                "Question": "The arcade title that Luigi debuted?",
                "Hint": "Something's coming out the plumbing poor Luigi's in bind",
                "Answer": "Mario Bros. (1983)"
            },

            {
                "question": "What is one way a website can store data in a user's browser?",
                "hint": "They are delicious with milk",
                "answer": "Cookies"
            },
            {
                "question": "What is a common way to shorten the response object's name inside middleware?",
                "hint": "It has the same abbreviation as \"resolution\"",
                "answer": "res"
            },
            {
                "question": "How many different values can booleans have?",
                "hint": "Think: binary",
                "answer": "2"
            },
            {
                "question": "Which HTML element can contain JavaScript?",
                "hint": "It starts with an \"s\"",
                "answer": "<script>"
            }



                ]


            }




}