'express route parameters keeps loading

I can see the dynamic id that appears on the URL but the page keeps loading... I have attached the route that HTML redirects us to and the database.

// Route Parameter

app.get('/detail/:id', (req, res) =>{

    const id = req.params.id;
    
    Blog.findById(id)
        .then((result) => res.render('detail',   { title: 'Blog Detail',blog: result }))
        .catch(err => console.log(err));
});

// HTML that's redirects to that route

            <% if(blogs.length > 0) { %>
                <% blogs.forEach(blog =>{ %>
                <a href="/detail/<%=blog._id%>">
                <div class="blog-entry">
                    <a href="/detail/<%=blog._id%>" class="img-2"><img src="images/blog-1.jpg" class="img-fluid;" style="width: 80%; height: 40%;" alt="Colorlib Template"></a>
                    <div class="text pt-3">
                        <h3><a href="/detail/<%=blog._id%>"><%= blog.title %></a></h3>
                        <p style="margin-top: -10px;"><span class="pr-3"><%= blog.snippet%></span</p>
                        <p class="mb-0"><a href="/detail/<%=blog._id%>" class="btn btn-black py-2">Read More <span class="icon-arrow_forward ml-4"></span></a></p>
                    </div>
                    </div>
                    </a>

// Schema & Model (Database)

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const blogSchema = new Schema({

    title: {
        type:String,
        required: true
    },

    snippet:{
        type:String,
        required: true
    },

    body:{
        type:String,
        required: true
    },

    // image: 

}, { timestamps: true });


const Blog = mongoose.model('Blog', blogSchema);

module.exports = Blog;

Solution 1:^[1]

The page got rendered when i removed css and scripts to it. Found to the solution here on stack overflow that you have to use "/" before giving any css or js path reference:

so instead of this:

HTML head

<head>
    <title><%= title %></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.css">
    
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">

    <link rel="stylesheet" href="css/aos.css">

    <link rel="stylesheet" href="css/ionicons.min.css">
    
    <link rel="stylesheet" href="css/flaticon.css">
    <link rel="stylesheet" href="css/icomoon.css">
    <link rel="stylesheet" href="css/style.css">
  </head>

<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/scrollax.min.js"></script>
<script src="js/main.js"></script>

**Add / **

HTML Head

<head>
    <title><%= title %></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/css/open-iconic-bootstrap.min.css">
    <link rel="stylesheet" href="/css/animate.css">
    
    <link rel="stylesheet" href="/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="/css/magnific-popup.css">

    <link rel="stylesheet" href="/css/aos.css">

    <link rel="stylesheet" href="/css/ionicons.min.css">
    
    <link rel="stylesheet" href="/css/flaticon.css">
    <link rel="stylesheet" href="/css/icomoon.css">
    <link rel="stylesheet" href="/css/style.css">
  </head>

<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-migrate-3.0.1.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.easing.1.3.js"></script>
<script src="/js/jquery.waypoints.min.js"></script>
<script src="/js/jquery.stellar.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/jquery.magnific-popup.min.js"></script>
<script src="/js/aos.js"></script>
<script src="/js/jquery.animateNumber.min.js"></script>
<script src="/js/scrollax.min.js"></script>
<script src="/js/main.js"></script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Farrukh Ayaz

'express route parameters keeps loading

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]