I'm encountering some challenges when attempting to access other routes from the index page. While I can access the index without any issues, I receive a 404 error when trying to navigate to any other route. All the other routes are set up similarly, so I'm not sure where the problem lies. Do you have any insights on what might be causing this issue? Thank you.
Below is my app.js file:
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var aboutRouter = require('./routes/about');
var workRouter = require('./routes/work');
var projectRouter = require('./routes/projects');
var donateRouter = require('/routes/donate');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
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('/', indexRouter);
app.use('/about', aboutRouter);
app.use('/work', workRouter);
app.use('/projects', projectRouter);
app.use('/donate', donateRouter);
// handle 404 errors
app.use(function(req, res, next) {
next(createError(404));
});
// error handling middleware
app.use(function(err, req, res, next) {
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
Next, we have the index.js route:
var express = require('express');
var router = express.Router();
/* GET home page */
router.get('/', function(req, res) {
res.render('index'){
if(err){
console.log(err);
}
};
});
module.exports = router;
Here's an example of the new about.js route:
var express = require('express');
var router = express.Router();
/* GET about page */
router.get('/about', function(req, res, next) {
res.send('about page'){
if(err){
console.log(err);
}
};
});
module.exports = router;
Lastly, I'm using partials, so here's the header.ejs snippet:
<!DOCTYPE html>
<html>
<head>
<title>Africa Foundation</title>
<link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
<link rel='stylesheet' href='/stylesheets/main.css' />
<script src='/javascripts/fontawesome-all.min.js'></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">
<img id='af-logo-nav' src='/images/swirl.png'>
<span>Africa Foundation</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/about">About <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/work">Our Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link btn-btn-warning" href="/donate">Donate</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="bg">