I am creating an app using Express.js and Pug as a view engine. It has a navigation bar redirecting the user to the 3 possible pages: Homepage, Contact, and Our Services.

The issue here is that only the homepage appears successfully. The rest of the pages (contact.pug and our-services.pug) show me the error: "GET http://localhost:3004/contact 404 (Not Found)", although the navbar does appear on top in each page.

I made sure that, for all pages:

1. There exists a js file in the routes folder that renders the page :

(routes/contact.js)

    var express = require('express');
    var router = express.Router();
    var valid = require("../mychecker");
    
    router.get('/contact', function(req, res){
       if(valid()){
        res.render('contact', {
           name:"You can contact us here"
        });
       }
       else res.send("you are using this website outside working hours.");
     })
    
    module.exports = router;

2. The router of each page is imported into app.js and used using app.use().

3. Every page can be accessed with the "buttons" present in layout.pug. It is the navbar that is included in every page.pug file.

I have tried to check any differences between my code for the homepage and my code for the contact and our-services page, and I did not notice anything different.

Here is my app.js file:

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var homeRouter = require('./routes/homepage');
var contactRouter = require('./routes/contact');
var servicesRouter = require('./routes/our-services');

var app = express();

app.listen(3004, function(){
  console.log('Express listening on port', this.address().port);
});
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use(['/','/home'], homeRouter);
app.use('/contact', contactRouter);
app.use('/our-services', servicesRouter);


// catch 404 and forward to error handler
// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});


module.exports = app;

This is my layout.pug file:

doctype html
html
  head
      style(type="text/css").
          nav {
              background-color: black;
              margin:0;
              padding:5px;
          }
          nav a{
              color:aliceblue;
              text-decoration: none;
              margin: 0 10px 10px 0;
          }

      nav
          ul 
                  a(href="home") Home              
                  a(href="our-services") Services              
                  a(href="contact") Contact 
  body
    block content

Finally, this is how every page.pug file looks like: (views/contact.pug)

extends layout

block content
   body
      h1=name

CodePudding user response：

When creating a router file, importing, and using it in app.js, the route you provide here:

app.use('/contact', contactRouter);

Is used on top of your home route. This means the link to the contact page is- HTTP://localhost:3004/contact/contact. That is true for every router you've created.

if you want the page url to be localhost:3004/contact/ , you should change the statement as such:

router.get('/', function(req, res){
       if(valid()){
        res.render('contact', {
           name:"You can contact us here"
        });
       }
       else res.send("you are using this website outside working hours.");
     })