Страница Гэтсби на странице

После долгих попыток понять Гэтсби, я могу сказать, что до сих пор не понимаю, поскольку его документы обширны и не очень ясны. Но как только я начал смотреть на node-apis и onCreatePage, это дало мне несколько идей. Об этом буквально говорят документы.

onCreatePage

Called when a new page is created. This extension API is useful for programmatically manipulating pages created by other plugins e.g. if you want paths without trailing slashes.

Так что единственная часть здесь, которая дает мне намек на это, может быть ключом к тому, чтобы мне помочь, - это эта строка. полезно для программного управления страницами, созданными другими плагины

В любом случае, это заставило меня написать хоть какой-то код. Затем, примерно через 3 часа, я нашел плагин, который делал именно то, что я пытался сделать с помощью этого метода. Плагин называется gatsby-plugin-create-client-paths ключ, здесь клиентские пути !!!!!

This makes life worth living! So in my case above I just wanted to be able to use Gatsby's router ( which is just react-router-dom behind the scenes), to pass me and id or value to routers match.params object. It still doesn't but what it does do is checks for any path after a prefix like /folder/ в моем случае '/о работе и воссоздайте страницу с компонентом шаблона (в моем случае продолжайте использовать pages / about / index.js), который является моим шаблоном. Теперь, когда у нас есть рендеринг about / index.js для любой ссылки после / about /, мы можем использовать некоторый внутренний оператор switch для обработки местоположения, переданного в /about/index.js. По-прежнему не получаю обновление match.params, но получаю props.location.pathname; что позволяет мне извлекать все, что находится после префикса, для использования в операторе switch для рендеринга моих конкретных компонентов на основе имени пути маршрута. Достаточно кроликов здесь - это грубое решение, которое можно показать в качестве примера.

Так что добавьте плагин как npm install. откройте gatsby.config.js и добавьте в экспорт приведенный ниже код.

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`/about/*`] },
    },
  ]
} 

Тогда в моей главной странице о pages/about/index

import React from "react";
import SideBar from '../../components/about/side-nav';

export default (props) => {
  const { pathname } = props.location;
  var n = pathname.lastIndexOf('/');
  var pageId = pathname.substring(n + 1);

  const page = () => {
    switch(pageId){
      case '': 
        return (
          <div>Work Page</div>
        );
      case 'work':
        return (
          <div>Work Page</div>
        );
      case 'hobbies':
        return (
          <div>Hobbies Page</div>
        );
      case 'buildings':
      return (
        <div>buildings Page</div>
      );
    }
  }
  return (
    <div id = "about">
      <SideBar />
      <div id = "content">
        {page()}
      </div>
    </div>
  );
};

Затем на боковой панели я называю это так.

  <li><Link to = "/about/work">work</Link></li>
  <li><Link to='/about/hobbies'>hobbies</Link></li>
  <li><Link to='/about/buildings'>buildings</Link></li>

Надеюсь, это поможет кому-то другому. После всего этого я начинаю серьезно сомневаться в большей части Гэтсби, особенно с не очень ясной документацией. Основываясь на ответе на мой вопрос, я думаю, что не многие люди в сообществе stackoverflow используют Gatsby, что беспокоит вас, когда вам нужна помощь. Похоже, что сообщество Gatsby на github очень полезно, но это должно быть для проблем с ошибками, а не для таких вопросов, как мой, но обнадеживает.

Надеюсь, это кому-то поможет.