如何在Express/Node.js中根据文章名称动态定义嵌套路由

• 1. 链接路径与路由规则不匹配：你后端定义的动态路由是/route1/:link，采用的是路径参数传值，要求的访问路径格式是/route1/article1这类，但你前端a标签的href写的是futureai?id=<%= article.link %>，既没有匹配/route1/前缀，还用了查询参数?id=的形式，完全不符合后端路由的匹配规则，自然无法被捕获。
• 2. 模板语法错误：你EJS模板里的articles.forEach循环没有写闭合的<% }) %>，渲染模板的时候会直接报错。
• 3. 多余的async/await使用：你操作的是本地静态数组，filter是同步方法，不需要加await，不会有异步返回。
• 4. 相对路径问题：a标签的href如果不加前缀/，会以当前页面路径为基准拼接，比如当前在/route1页面时，点击链接会变成/route1/futureai?id=xxx，进一步导致路由匹配失败。

第一步：修正模板代码 #

把a标签的href改成和后端路由匹配的格式，同时补全循环闭合：

<!-- Main Content-->
<div class="container px-4 px-lg-5">
    <div class="row gx-4 gx-lg-5 justify-content-center">
        <div class="col-md-10 col-lg-8 col-xl-7">
            <!-- Post preview-->
            <div class="post-preview">
                    <% articles.forEach(article => { %>
                        <h2 class="post-title" style="margin-bottom: -1.41rem"><a href="/route1/<%= article.link %>"><%= article.title %></a></h2>
                    <% }) %>
            </div>
        </div>
    </div>
</div>

第二步：优化后端路由逻辑 #

可以直接匹配到对应文章再返回，不用每次都过滤全量数据：

const express = require('express')
const router = express.Router()

//load articles 
const Articles = require('../articles/articles');

// ----Routing----
router.get("/", (req, res) => {
    const articles = Articles.articles.filter(all => all.publish ==='True')
    res.render("index", {articles: articles});
});

router.get("/route1", (req, res) => {
    const articles = Articles.articles.filter(all => all.publish ==='True');
    res.render("route1", {articles: articles});
});

router.get("/route1/:link", (req, res, next) => {
    // 直接匹配对应link且已发布的文章
    const targetArticle = Articles.articles.find(item => item.publish === 'True' && item.link === req.params.link);
    if(!targetArticle) {
        return res.status(404).json({message: '文章不存在'})
    }
    // 如果你需要渲染文章详情页，可替换为res.render("articleDetail", {article: targetArticle})
    return res.json({ message: '文章获取成功', article: targetArticle});
});

module.exports = router

第三步：验证测试 #

启动服务后，点击文章标题，路径应该变成类似http://你的服务地址/route1/article2的格式，即可正常触发动态路由返回对应数据。

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