got 404 when reload the page in dynamic route in gatsby on production only

user_5974595 0
Viewed 1531

here is my gatsby-node.js code


exports.onCreatePage = async ({ page, actions }) => {
    const { createPage } = actions;

    // Only update the `/blogs` page.
    if (page.path.match(/^\/blog/)) {
        // page.matchPath is a special key that's used for matching pages
        // with corresponding routes only on the client.
        page.matchPath = "/blog/*";

        // Update the page.
        createPage(page)
    }
}

here are the routes I include on the blog page.

 return (
        <Layout>
            <Router basepath="/blog">
                <BlogPage path="/" blogs={blogs} tags={tags} categories={categories}/>
                <BlogDetail path="/:slug" blogs={blogs} tags={tags.data}/>
                <Category path="/category/:category" blogs={blogs} tags={tags.data} categories={categories.data}/>
                <Category path="/tags/:tag" blogs={blogs} tags={tags.data} categories={categories.data}/>
                <Category path="/author/:author" blogs={blogs} tags={tags.data} categories={categories.data}/>
            </Router>
        </Layout>
    )

it's working fine when redirecting on click. But, got 404 when once the page is load and refreshes it.

I tried lots of solutions but bad luck.

here is my file structure.

enter image description here

gatsby reactjs routes
1 Answers

It is a known issue that probably won't be fixed. A possible workaround is to set up a server-side redirect. For example if you are on netlify, you can add this to your netlify.toml:

[[redirects]]
  from = "/blog/*"
  to = "/blog"
  status = 200
  force = true
user_83827380
Related