Gatsby/Reach 路由器 404 但页面呈现

Question

在本地构建没有问题，除非查看网络选项卡，否则最终用户不会在生产构建中看到任何问题。第一页请求 404，然后页面按预期呈现。

预期功能

渲染部门页面组件

/shop/
/shop/category-1/

呈现 PLP 页面组件

/shop/category-1/item-type/

呈现 PDP 模板，项目名称是 ContentStack 内容的关键，查询参数从单独的产品中提取产品数据 API

/shop/item-name?item=query-param&color=brown...

除页面呈现前的初始 404 外，这一切都有效。

问题仅出现在 /shop/ 路径后面的页面。所有其他站点页面、路由、模板都可以正常工作。感谢任何建议。

在 src/gatsby-node.js 我有

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions;
    if (page.path === '/shop/') {
      page.matchPath = '/shop/*';
      createPage(page);
    }  
  };

exports.createPages = async ({ actions, graphql }) => {
const { createPage } = actions;
const pdpTemp = path.resolve("src/templates/pdp/index.js");

try {
    const result = await graphql(`
        {
            pdp: allContentstackPdp {
                edges {
                    node {
                        id
                        url
                    }
                }
            }
        }
    `);

    let node;

    // PDP Pages
    for (let i = 0; i < result.data.pdp.edges.length; i++) {
        node = result.data.pdp.edges[i].node;
        await createPage({
            path: node.url,
            component: pdpTemp,
            context: {
                pdpId: node.id
            }
        });
    }
}

catch (err) {
    throw new Error(err);
}
}

我有一个包含以下路由的页面，src/pages/shop/index.js

render() {
return (
    <Router>
        {/* Department Pages */}
        <DEPT path='/shop/' />
        <DEPT path='/shop/category-1/' />
        <DEPT path='/shop/category-2/' />
        <DEPT path='/shop/category-3/' />
        {/* PLP Pages */}
        <PLP path='/shop/category-1/*' />
        <PLP path='/shop/category-2/*' />
        <PLP path='/shop/category-3/*' />
    </Router>
);
}

还有一个模板也受此问题影响src/templates/pdp/index.js

Answer 1

如果我的理解正确，您想要排除（或避免）某些页面的问题，不是吗？ /shop/* 路径下的那些。

也许有一种简单的方法可以实现这一点。使用 gatsby-plugin-exclude 插件。

{
  resolve: 'gatsby-plugin-exclude',
  options: { paths: ['/shop/**']},
}

在该代码段中，所有以 /shop/ 为前缀的路径都将被排除在页面创建之外（并将被重定向到 404）。

Answer 2

我们的解决方案是在 AWS 中添加 301 次重写。

Gatsby/Reach 路由器 404 但页面呈现

Gatsby/Reach Router 404 but page renders

gatsby

reach-router