Question

当我尝试从索引页面访问其他路由时遇到问题。我可以点击索引没问题，但任何其他路线我得到404错误。其他路线几乎一样，所以我不确定是怎么回事。知道我做错了什么吗？感谢。

这是我的app.js：

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);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

这是index.js路线：

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;

这是新的about.js路线：

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;

我使用了部分内容，所以这里是header.ejs。

<!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">

Answer 1

我相信你当前的代码你需要点击的路线是/ about / about它可以工作。检查是否有效以及是否有效。将您的app.use（＆＃39; about＆＃39;，aboutRouter）更改为app.use（aboutRouter）。那么你的路线应该按预期工作。这是因为设置＆＃39;关于＆＃39;在app.use中设置一个虚拟路线排序

Answer 2

而不是使用

<块引用>

res.send("关于页面")

你能不能把它改成一些简单的名字，比如

<块引用>

“关于”

就像有时空格会带来麻烦。我认为这可能会奏效。

404错误快速路由

2 个答案: