CODEWITHSUNDEEP
reactjsgatsby
yavgz
yavgz

Reputation: 369

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

I am routing dynamically with the compilation of static pages using 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 compiles that statics files with the .title property

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

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

when I try to navigate to another page, it forms a url like this:

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

this is the result:

Article%20Seed%20#0

the data comes to backend, is there any practical way for any kind of title to a url convention that can be associated with the way gatsby compiles these static files?

Upvotes: 1

Views: 29

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29335

Gatsby compiles the static files with the given path:

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

So, if you are using slugify to convert the title (node.title) to a valid path, it has nothing to do with Gatsby but slugify, which is removing the # to add a hyphen (-) in between among other things (indeed, it's creating a slug from a given string).

If your Link doesn't have the right target URL, just use slugify in the same way:

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

Upvotes: 1

Related Questions