Express路由渲染异常：访问/1返回304，无法加载layout2.hbs

首先要明确：304 Not Modified并不是错误状态码，它表示浏览器请求的资源在本地已有缓存，且服务器端资源未更新，因此直接返回304让浏览器复用本地缓存。但你访问/1时没看到预期的layout2.hbs，核心问题出在代码的几处错误配置上：

问题1：路由文件中多余的Express实例创建 #

在routes/index.js里，你不需要额外创建Express app实例：

var app = require('express')(); // 这行完全多余，会干扰路由逻辑

路由文件只需要使用router对象定义路由即可，多余的app实例会导致路由配置混乱。

问题2：重复且位置错误的静态资源中间件 #

router.use(express.static("public"));存在两个问题：

• 它被放在路由定义之后，会影响路由匹配优先级
• app.js中已经配置了静态资源中间件，重复配置会导致资源加载逻辑冲突
  应该直接删掉路由文件里的这行代码。

问题3：app.js中重复创建Express实例 #

app.js里连续两次创建app实例：

var app = require('express')(); // 第一次创建
// ...
var app = express(); // 第二次覆盖了之前的实例

这会导致之前的部分配置被覆盖，进而引发中间件或路由失效。

修正后的代码 #

1. 调整routes/index.js #

var express = require('express');
var router = express.Router();
var db = require('monk')('localhost:27017/');
var userData = db.get('user-data');

// 移除多余的app实例创建代码
// var app = require('express')();

router.get('/', function(req,res,next){
 res.render('layout');
});

router.get('/1', function(req,res,next){
 res.render('layout2');
});

// 移除重复的静态资源中间件
// router.use(express.static("public"));

module.exports = router;

2. 调整app.js #

var express = require('express');
var path = require('path');
var port = require('port');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var hbs = require('express-handlebars');
const queryString = require('query-string');
var routes = require('./routes/index');

// 只创建一次Express实例
var app = express();

// view engine setup
app.engine('hbs', hbs({extname: 'hbs', defaultLayout: 'layout', layoutsDir: __dirname + '/views'}));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
 var err = new Error('Not Found');
 err.status = 404;
 next(err);
});

// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
 app.use(function(err, req, res, next) {
 res.status(err.status || 500);
 res.render('error', {
 message: err.message,
 error: err
 });
 });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
 res.status(err.status || 500);
 res.render('error', {
 message: err.message,
 error: {}
 });
});

module.exports = app;

验证步骤 #

1. 关闭当前运行的服务器，清除浏览器缓存（使用Ctrl+Shift+R强制刷新）
2. 重新启动Express服务器
3. 访问http://localhost:3000/1（如果你的端口不是3000，替换为实际端口）

若仍有问题，可以额外检查：

• layout2.hbs是否存在于views目录下，文件名称是否完全匹配（注意大小写）
• Handlebars的layoutsDir配置路径是否正确指向views目录

内容的提问来源于stack exchange，提问作者Sebastian Przybylski