添加多个占位符时Express路由无法正常工作

Hey there, let's figure out why your multi-placeholder Express route isn't working—this is a super common gotcha, so I’ve got a few solid leads for you:

1. Fix Static Resource Paths (Most Likely Cause) #

When you visit a route like /johndoe/123, any relative paths in your user.html (or whatever page you’re serving) get messed up. For example, if your HTML has:

<link href="css/style.css">

Your browser will try to fetch it from /johndoe/123/css/style.css instead of the correct /css/style.css in your public folder.

Two easy fixes:

• Use absolute paths for all static assets: Change every resource link to start with a /, like <link href="/css/style.css">
• Add a base tag to your HTML head: Stick <base href="/"> in the <head> of your pages—this tells the browser to resolve all relative paths from the root directory.

2. Verify Middleware & Route Order #

Express processes middleware and routes in the order you define them, so make sure you’ve got things set up correctly:

• Always mount your middleware (express.static, bodyParser) before defining your routes.
• Use absolute paths with res.sendFile—relative paths depend on Node’s working directory, which can cause unexpected issues. Here’s how to fix that:

const path = require('path');
const express = require('express');
const app = express();
const bodyParser = require('body-parser');

// Mount middleware first
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
// Use an absolute path for express.static to avoid confusion
app.use(express.static(path.join(__dirname, 'public')));

// Define routes next
app.get('/:username', (req, res) => {
  // Serve user.html with an absolute path
  res.sendFile(path.join(__dirname, 'ui', 'user.html'));
});

app.get('/:username/:id', (req, res) => {
  // Serve your detail page (or handle logic) with absolute path
  res.sendFile(path.join(__dirname, 'ui', 'user-detail.html'));
});

3. Check for Route Conflicts #

If you have other routes that overlap with /:username/:id, Express will match the first one it encounters. For example, if you have a route like /:username/posts defined after /:username/:id, the posts segment will get caught by the :id placeholder instead of hitting your posts route.

Fix this by putting more specific routes before generic ones:

// More specific route first
app.get('/:username/posts', (req, res) => {
  res.send('User posts page');
});

// Generic multi-placeholder route after
app.get('/:username/:id', (req, res) => {
  res.sendFile(path.join(__dirname, 'ui', 'user-detail.html'));
});

Start with checking the static resource paths—9 times out of 10 that’s the issue. If that doesn’t work, double-check your route order and sendFile paths.

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