Error in Routing in Node Js


Hi, I'm learning Node and I'm using the ejs library to do renders and routes, but I have a little problem. I would like to know how I can make my Bootstrap navbar correctly point to my routes ... Right now that's how I got my answers from the server and the navbar ...

var express = require('express');
var engine = require('ejs-locals');

var app = express();
//var path    = require("path");
var serv = require('http').Server(app);
const port = 3000;

app.engine('ejs', engine);
app.set('view engine', 'ejs');

app.get('/', function(req, res) {
  // res.sendFile(path.join(__dirname+'/views/home/index.html'));
  //__dirname : It will resolve to your project folder.

app.get('/about', function(req, res) {
  // res.sendFile(path.join(__dirname+'/views/home/index.html'));
  //__dirname : It will resolve to your project folder.

app.get('/chat', function(req, res) {

console.log('Server Started. ___ in port:' + port);
<!-- Navegador implementado en vistas -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
      <a class="navbar-brand" href="home/">Project name</a>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="about/">About</a></li>
        <li><a href="chat/">Chat</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../navbar/">Default</a></li>
        <li><a href="../navbar-static-top/">Static top</a></li>
        <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
    <!--/.nav-collapse -->

When I'm in the root there is no problem I can access any site / home , / about . The problem is when I'm in a view, suppose that in "about /" when I click on the anchor that points to "/ home" it throws me a request with something like this ...

asked by E.Rawrdríguez.Ophanim 26.12.2017 в 00:14

1 answer


When creating a link with the following structure

<li><a href="chat/">Chat</a></li>

You are redirecting to the path chat but will do it after of the current route, ie if you are in , redirect it to and only think it works when is at the root of your website.

Your links should start with / since with this the route will always start from your directory or main project site.

When creating the following link

<li><a href="/chat">Chat</a></li>

What you are redirecting is first to the main route of your site / and then to chat , that is if you are currently in and then select the path chat , what will happen is that it will be redirected to since is the main path or Root of your site.


For more detail Absolute vs. relative URLs in SOEn

answered by 26.12.2017 / 00:29