Only able to get page to load by using whole route when I should be able to use '/:id'

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


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

   module.exports = router;

   const express = require('express');
   const bodyParser = require('body-parser');
   const cookieParser = require('cookie-parser');
   const app = express();

   app.use(cookieParser());

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

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


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

   app.use(mainRoutes);
   app.use(cardRoutes);


   app.use((req, res, next) => {
       const err = new Error('URL not found');
       err.status = 404;
       next(err);
   });


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