I am currently working on developing a campgrounds application based on Colt Steele's Udemy course "The Web Developer Bootcamp". Everything is going smoothly except for one issue I encountered. When I restart the server and directly access the URL with an ID parameter to navigate to the SHOW ROUTE /campgrounds/:id or any route that requires rendering content from a file, I receive the error message "Cannot read property 'name' of null". It seems like the data is not being properly passed through the callback function when the server restarts. However, if I follow the correct steps by first visiting the index route and then selecting a campground using the interface, everything works as expected. The problem only occurs when entering the URL directly.

    3| 
    4| <h1>This is show.ejs</h1>
 >> 5| <p><%= campground.name %> </p>
    6| <img src="<%= campground.image %> " alt="">
    7| <p><%= campground.description %>  </p>
    8| <br>

Cannot read property 'name' of null
    at eval (/home/roshaan/Desktop/Projects/WebDevBootcamp/YelpCamp/v4/views/campgrounds/show.ejs:13:37)
    at show (/home/roshaan/Desktop/Projects/WebDevBootcamp/YelpCamp/v4/node_modules/ejs/lib/ejs.js:691:17)
    at tryHandleCache (/home/roshaan/Desktop/Projects/WebDevBootcamp/YelpCamp/v4/node_modules/ejs/lib/ejs.js:272:36)
    at View.exports.renderFile [as engine] (/home/roshaan/Desktop/Projects/WebDevBootcamp/YelpCamp/v4/node_modules/ejs/lib/ejs.js:489:10)
    at View.render (/home/roshaan/Desktop/Projects/WebDevBootcamp/YelpCamp/v4/node_modules/express/lib/view.js:135:8)
    at tryRender (/home/roshaan/Desktop/Projects/WebDevBootcamp/YelpCamp/v4/node_modules/express/lib/application.js:640:10)
    at Function.render (/home/roshaan/Desktop/Projects/WebDevBootcamp/YelpCamp/v4/node_modules/express/lib/application.js:592:3)
    at ServerResponse.render (/home/roshaan/Desktop/Projects/WebDevBootcamp/YelpCamp/v4/node_modules/express/lib/response.js:1012:7)
    at Campground.findById.populate.exec (/home/roshaan/Desktop/Projects/WebDevBootcamp/YelpCamp/v4/app.js:70:17)
    at /home/roshaan/Desktop/Projects/WebDevBootcamp/YelpCamp/v4/node_modules/mongoose/lib/model.js:4887:16
    at /home/roshaan/Desktop/Projects/WebDevBootcamp/YelpCamp/v4/node_modules/mongoose/lib/helpers/promiseOrCallback.js:24:16
    at /home/roshaan/Desktop/Projects/WebDevBootcamp/YelpCamp/v4/node_modules/mongoose/lib/model.js:4910:21
    at _hooks.execPost (/home/roshaan/Desktop/Projects/WebDevBootcamp/YelpCamp/v4/node_modules/mongoose/lib/query.js:4390:11)
    at /home/roshaan/Desktop/Projects/WebDevBootcamp/YelpCamp/v4/node_modules/kareem/index.js:135:16
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

The main app.js file has the following code:

var express = require("express"),
    app = express(),
    bodyParser = require("body-parser"),
    mongoose = require("mongoose"),
    Campground = require("./models/campground"),
    seedDB = require("./seeds");
    
    
mongoose.set('useNewUrlParser', true);
mongoose.set('useFindAndModify', true);
mongoose.set('useCreateIndex', true);
mongoose.set('useUnifiedTopology', true);
mongoose.connect('mongodb://localhost/yelp_camp');

app.use(bodyParser.urlencoded(
    { extended:true }
    ));
app.set("view engine", "ejs")

seedDB();
        

app.get("/", (req, res) => {
    res.render("landing");
})

// INDEX - display all campgrounds
app.get("/campgrounds", (req,res)=>{
    // Retrieve all campgrounds from the database
    Campground.find({},(err,campgrounds)=>{
        if(err){
            console.log(err);
        }else{
            res.render("campgrounds/index", {campgrounds:campgrounds});
        }
    });
});

// CREATE - Add new campground to DB
app.post("/campgrounds", (req,res) => {
    var name = req.body.name;
    var image = req.body.image;
    var desc = req.body.description;
    var newCampground = {name: name, image:image, description:desc}
    // Create a new campground and save it to the DB
    Campground.create(newCampground, (err, newlyCreated)=>{
        if(err){
            console.log(err);
        } else{
            // Redirect back to the campgrounds page
            res.redirect("/campgrounds")
        }
    });
});

// NEW - display form to create a new campground
app.get("/campgrounds/new", (req,res) => {
    res.render("new");
});

// SHOW - display information about one campground
app.get("/campgrounds/:id",(req,res)=>{
    // Find the campground with the provided ID
    Campground.findById(req.params.id).populate("comments").exec((err, campground)=>{
        if(err){
            console.log(err);
        }else{
            // console.log(foundCampground);
            // Render the show template with that campground
            res.render("campgrounds/show", {campground: campground});
        }
    });
});

// ===================
// COMMENTS ROUTES
// ===================

app.get("/campgrounds/:id/comments/new", (req, res)=> {
    // Find the campground by its ID
    Campground.findById(req.params.id, (err, foundCampground)=>{
        if (err) {
            console.log(err);
        } else {
            
            res.render("comments/new", {campground:foundCampground})
        }
    });
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
    console.log(`the YelpCamp Server has started on port: ${PORT} `);
});