导航栏中的链接将我重定向到错误的路径答案

【问题标题】：Links in the navbar redirects me to wrong path导航栏中的链接将我重定向到错误的路径
【发布时间】：2020-04-19 02:12:25
【问题描述】：

我已经开始开发一个身份验证应用程序，注册和登录的导航栏链接没有将我重定向到正确的目的地。他们似乎在着陆索引页面上运行良好，但在任何其他页面上都没有。

same site where the links start to break

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')%>

【问题讨论】：

标签： javascript html css node.js express

【解决方案1】：

我相信你需要像这样在views/partials/header.ejs 的href 上添加一个斜杠：

<li><a href="/users/register">Register</a></li>
<li><a href="/users/login">Login</a></li>

原因：

使用users/login 会将路径附加到当前文档级别，而不是站点的根目录。因此，如果您在 url localhost:3000/users，href users/login 将扩展为 localhost:3000/users/users/login，而 href /users/login 将扩展为 localhost:3000/users/login

【讨论】：