Невозможно получить переходы для работы в Гэтсби, используя graphQL и createPages

Question

Я сделал git клон gatsby-wordpress-starter ( https://www.gatsbyjs.org/starters/?c=Wordpress)

Не внося никаких изменений, я добавил позу: ( https://popmotion.io/pose/examples/route-transitions-reach-router/)

Следуя инструкциям на приведенном выше URL-адресе, я изменил файл component /layout.js на следующий (немного другой, поскольку пути к страницам не жестко запрограммированы в макете, как в примере):

import React from 'react'
import ReactDOM from 'react-dom';
import { Router, Link, Location } from '@reach/router';
import Helmet from 'react-helmet'

import Navbar from '../components/Navbar'
import Page from '../templates/page'
import './all.sass'
import posed, { PoseGroup } from 'react-pose';

const RouteContainer = posed.div({
  enter: { opacity: 1, delay: 300, beforeChildren: 300 },
  exit: { opacity: 0 }
});

const PosedRouter = ({ children }) => (
<Location>
    {({ location }) => (      <PoseGroup>
        <RouteContainer key={location.key}>
          <Router location={location}>{children}</Router>
        </RouteContainer>

      </PoseGroup>

)}
  </Location>
);


const TemplateWrapper = ({children}) => (
<div>

    <Helmet title="Home | Gatsby + Netlify CMS" />
    <Navbar />

        <PosedRouter/>
        {console.log(location)}
</div>
)

export default TemplateWrapper

Когда я запускаю это, я получаю: Uncaught TypeError: Невозможно прочитать свойство 'map' из неопределенного

Если я разверну файл console.log "location", там не будет "ключа"

Чтобы добавить к этому, я также попытался установить официальный плагин перехода Гэтсби, и это также не работает должным образом. Это делает входной переход, но не выходной переход. Он запускает завершенный переход, но только после изменения содержимого страницы.

Answer 1

Я бы предложил другой подход, который я всегда использовал для создания переходов между страницами (как с постепенным появлением, так и с постепенным исчезновением и др.): С использованием gatsby-plugin-transition-link. Я не уверен, какой из них вы пробовали, но этот работает и имеет более чистый и семантический подход.

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

Для предопределенных переходов (самый простой способ) вам нужно только импортировать компонент de и использовать его следующим образом:

import AniLink from "gatsby-plugin-transition-link/AniLink"

<AniLink paintDrip to="page-2">
  Go to Page 2
</AniLink>

Для настраиваемых переходов вам необходимо определить de entry и выйти effect, такие как:

<TransitionLink
  exit={{
    length: length,
    trigger: ({ exit, node }) =>
      this.someCustomDefinedAnimation({ exit, node, direction: "out" }),
  }}
  entry={{
    length: 0,
    trigger: ({ exit, node }) =>
      this.someCustomDefinedAnimation({ exit, node, direction: "in" }),
  }}
  {...props}
>
  {props.children}
</TransitionLink>

Для получения дополнительной информации ознакомьтесь с их документами.