Gatsby / Reach Router 404, но страница отображается

Question

Локальное построение не вызывает проблем, и конечный пользователь не увидит никаких проблем в производственной сборке, если не заглянет на вкладку сети. Первый запрос страницы 404, а затем страница отображается так, как ожидалось.

Ожидаемая функциональность

Компонент Render Dept Page

/shop/
/shop/category-1/

Компонент Render PLP Page

/shop/category-1/item-type/

Визуализация шаблона PDP, имя элемента является ключом для содержимого из ContentStack, параметры запроса извлекают данные о продукте из отдельного API продукта

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

Это все работает, за исключением начального 404 до отображения страницы.

Выпуск присутствует только для страниц за / магазин / маршрут. Все остальные страницы сайта, маршруты, шаблоны работают без проблем. Цени любые предложения.

В 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

Решение для нас было добавить 301 переписать в AWS.

Answer 2

Если я правильно понял вопрос, который вы хотите исключить (или избежать), некоторые страницы, не так ли? Те, что под /shop/* path.

Может быть, есть простой способ добиться этого. Использование gatsby-plugin-exclude plugin.

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

В этом фрагменте все пути с префиксом /shop/ будут исключены из создания страницы (и будут перенаправлены на 404).