I'm currently working on a basic website project using Node.js, Express, and the EJS template engine. I've run into an issue where my external CSS files are not loading properly on routes that contain route parameters. Here's a snippet of my code:
const express = require("express");
const app = express();
var AWS = require('aws-sdk');
var uuid = require('uuid');
var request = require('request');
var Amplify = require('aws-amplify');
const { info } = require("console");
app.use(express.static("public"));
app.set("view engine", "ejs");
app.get("/Test1/", function(req, res){
res.render("Test1.ejs");
});
app.get("/Test2/:route", function(req, res){
res.render("Test2.ejs")
});
Both Test1.ejs and Test2.ejs are basically identical copies of each other, one being duplicated from the other.
The problem arises when the CSS file loads perfectly fine on Test1 but fails to load correctly on Test2. Instead, Express serves the HTML content of Test2.ejs in place of the intended CSS file. This discrepancy occurs without any changes or reloads. The situation is puzzling because the CSS works flawlessly on all other routes except for those with route parameters. To troubleshoot, I have even tried incorporating the route parameter directly as follows:
app.get("/Test2/:route", function(req, res) {
const routeParam = req.params.route;
res.render("Test2.ejs", {
routeParam: routeParam
});
});`
Although I verified that the routeParam displays correctly on the page, the issue persists with the page rendering the HTML instead of the expected CSS file, resulting in improper formatting.
If anyone has insights or suggestions on resolving this matter, I would greatly appreciate it. Thank you!