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重写。

盖茨比/到达路由器404，但页面呈现

2 个答案: