"article seed # 0" => "article-seed-0" 导航到使用该网址的其他主页？

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)转换为一个有效的路径,它与盖茨比但slugify无关,这是消除#添加连字符(-)之间在其他方面(事实上,它创建一个鼻涕虫从给定字符串)。

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

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