I am currently developing an authentication app and facing an issue with the navbar links for register and login. They are not redirecting me to the correct destination. These links work perfectly on the landing index page, but not on any other page.
same site where the links are broken
app.js
var app = express();
var mongoose = require("mongoose");
var bodyParser = require("body-parser");
var users = require("./routes/users.js");
app.use(bodyParser.urlencoded([{extended:false}]));
app.set("view engine","ejs");
app.use(express.static("public"));
app.get("/",function(req,res){
res.render("index");
});
app.post("/hello",function(req,res){
res.redirect("/");
});
app.use("/users",users);
app.listen(3000,function(){
console.log("server has been started!!!");
});
routes/users.js
var router = express.Router();
router.get("/login",function(req,res){
res.render("login");
});
router.post("/login",function(req,res){
res.send("hello from login");
});
router.get("/register",function(req,res){
res.render("register");
});
router.post("/register",function(req,res){
res.send("hello from post");
});
module.exports = router;
views/partials/header.ejs
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li><a href="users/register">Register</a></li>
<li><a href="users/login">Login</a></li>
<li><a href="/logout">Logout</a></li>
</ul>
</div>
</nav>
views/index.ejs
<div class="container">
<div class="jumbotron">
<h1>Welcome to Index page</h1>
<p>Authentication test app</p>
</div>
</div>
<%- include('partials/footer')%>
views/register.ejs
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control input-form" id="exampleInputEmail1" placeholder="Email" name="email">
</div>
<div class="form-group">
<label for="exampleInputUsername">Username</label>
<input type="text" class="form-control input-form" id="exampleInputUsername" placeholder="Username" name="username">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control input-form" id="exampleInputPassword1" placeholder="Password" name="password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<%- include('./partials/footer')%>
views/login.ejs
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control input-form" id="exampleInputEmail1" placeholder="Email" name="email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control input-form" id="exampleInputPassword1" placeholder="Password" name="password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<%- include('./partials/footer')%>