"article seed # 0" => "article-seed-0" 导航到另一个 url 页面？

Question

我正在使用gatsby-node.

编译静态页面动态路由

    const path = require('path');
    const slugify = require('slugify');


    const templateForContentType = {
        articles: 'src/templates/ArticleDetail.tsx',
    };

    exports.createPages = async ({ graphql, actions }) => {
        const { createPage } = actions;

    .
    .
    .
        result.data.allStrapiFinancialEducationContents.nodes.forEach((node) => {
            const contentType = contentTypes[node.content[0].strapi_component];

            createPage({
                path: `/articles/${slugify(node.title, {
                    lower: true,
                })}`,
                component: path.resolve(templateForContentType),
                context: {
                    id: node.id,
                },
            });
        });
    };

gatsby 使用 .title 属性

编译静态文件

 [
 {title:"article-seed-0",
 {title:"article-seed-1"
 ]

 article-seed-0
 ...
 article-seed-n

当我尝试导航到另一个页面时，它形成了一个 url 像这样：

const {title:"article seed # 0" }
<Link to={article.title}>

这是结果：

Article%20Seed%20#0

数据进入后端，是否有任何实用的方法可以将任何类型的标题添加到 url 可以与 gatsby 编译这些静态文件的方式相关联的约定中？

Answer 1

Gatsby 使用给定的 path:

编译静态文件

path: `/articles/${slugify(node.title, {lower: true,})}`,

因此，如果您使用 slugify 将标题 (node.title) 转换为有效路径，它与 Gatsby 无关，但 slugify，它正在删除# 在中间添加一个连字符 (-)（实际上，它是从给定的字符串创建一个 slug）。

如果您的 Link 没有正确的目标 URL，只需以同样的方式使用 slugify：

<Link to={slugify(article.title, {lower:true})}>

"article seed # 0" => "article-seed-0" 导航到另一个 url 页面？

"article seed # 0" => "article-seed-0" to navigate to other Page with that url?

reactjs

gatsby