1

在本地构建没有问题，除非查看网络选项卡，否则最终用户不会在生产构建中看到任何问题。第一个页面请求 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

4

2 回答 2

0

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

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

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

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

于 2020-04-09T04:52:43.077 回答
-1

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

于 2020-04-24T18:39:11.183 回答