Routing folders with express in node.js - node.js

Question

I decided to take my routes out of my app.js and into their own seperate folders but now the site will load the handlebars file for index but not for about or contact - I am very confused and require help in exchange for a +1.
// Import the express module
var express = require('express');
var path = require("path");
var bodyParser = require("body-parser");
var index = require('./routes/index');
var about = require('./routes/about');
var contact = require('./routes/contact');
var handlebars = require('express-handlebars').create({defaultLayout:'main'});
var app = express();
// Block the header from containing information
// about the server
app.disable('x-powered-by');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'handlebars');
app.engine('handlebars', handlebars.engine);
//set static folder
app.use(express.static(__dirname + '/public'));//allows access to public directory
//set bower folder
app.use('/bower_components', express.static(__dirname + '/bower_components'));//defines bower components directory
//body parser MW
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.set('port', process.env.PORT || 1337);// Defines the port to run on
app.use("/", index);
app.use("/about", about);
app.use("/contact", contact);
app.use(function(req, res){
res.type('text/html');
res.status(404);
res.render('404');
});
app.use(function(err, req, res, next){
console.error(err.stack);
res.status(500);
res.render('500');
});
app.listen(app.get('port'), function(){
console.log("Express started on http://127.0.0.1:" + app.get('port') + ' Press Ctrl+C to terminate');
})
This is the routes/index.js file:
var express = require("express");
var router = express.Router();
// Defines the base url
router.get('/', function(req, res, next){
// Point at the home.handlebars view
res.render('home');
});
module.exports = router;
And routes/about.js
var express = require("express");
var router = express.Router();
router.get('/about', function(req, res, next){
res.render('about');
});
module.exports = router;
When I go to localhost/contact, I get my 404 page and the same for /about.
The views are located in app/views, it worked when I had them down the pipeline in the app.js but since removing them it has broken. Any suggestions would be much appreciated!

Answer 1

This issue was with the routing itself. Say we are looking for /about with:
app.use("/about", about);
The app will then look into the routing folder of about and find the following.
var express = require("express");
var router = express.Router();
router.get('/about', function(req, res, next){
res.render('about');
});
module.exports = router;
And since I had another /about here in the router.get this would render at localhost/about/about