Как я могу добавить контекст для создания страницы Гэтсби?

Question

Я застрял с этой проблемой, и я не уверен, что не так. Я делаю проект для онлайн-курсов. Итак, у меня есть страница с кнопкой, которая относится к предварительному заказу

 <Link to={`/preorder/${slug}`} state={{ title: `${title}`}} className={styles.button}>Buy a course </Link> 

Таким образом, в предварительном заказе у меня есть URL-адрес типа preorder/currentSlug.

И все работает нормально, если я сначала нажимаю на карточке курсазатем, при покупке, я имею в виду, что у меня есть заголовок из предыдущей ссылки, и это то, что я хочу.

 const Preorder = ({ location }) => { return (
<>
  <NoSSR>
     <h4 className={styles.title}>{location.state.title}</h4>
  </NoSSR>
<> )};

Но проблема в том, что когда в новом окне браузера я открываю ссылку preorder/currentSlug, у меня естьназвание как неопределенное. Я полагаю, что проблема с контекстом в методе createPage. Вот мой код:

  const path = require(`path`);
  exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions;
  const coursePost = path.resolve(`./src/templates/course.js`);
  const preorder = path.resolve(`./src/templates/preorder/index.js`);
  return graphql(`
    {
      allContentfulCourse {
        edges {
          node {
            title
            tutor
            job
            slug
            team {
              job
              photo
              role
              desc
              name
            }
            logo {
              description
              file {
                url
              }
            }
          }
        }
      }
    }
  `).then(result => {
    if (result.errors) {
      throw result.errors;
    }

    const courses = result.data.allContentfulCourse.edges;

    courses.forEach(course => {
      createPage({
        path: course.node.slug,
        component: coursePost,
        context: {
          slug: course.node.slug
        }
      });
    });

    courses.forEach(course => {
      createPage({
        path: `preorder/${course.node.slug}`,
        component: preorder,
        context: {
          course
        }
      });
    });
  });
};

У вас есть идеи, что я делаю не так?