无法使用 graphQL 和 createPages 在 Gatsby 中进行转换答案

【问题标题】：Can't get transitions to work in Gatsby using graphQL and createPages无法使用 graphQL 和 createPages 在 Gatsby 中进行转换
【发布时间】：2019-03-17 09:41:54
【问题描述】：

我做了一个 git clone 的 gatsby-wordpress-starter (https://www.gatsbyjs.org/starters/?c=Wordpress)

没有做任何更改，我添加了姿势： (https://popmotion.io/pose/examples/route-transitions-reach-router/)

按照上述网址中的说明，我将 components/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: Cannot read property 'map' of undefined

如果我展开'location'的console.log，那里没有'key'

此外，我还尝试安装官方 gatsby 转换插件，但也无法正常工作。它执行进入转换，但不执行退出转换。它确实会触发退出的转换，但直到页面内容更改后才会触发。

【问题讨论】：

标签： reactjs transition gatsby reach-router

【解决方案1】：

我建议另一种方法，这是我一直用来创建页面转换（淡入、淡出和其他）的方法：使用gatsby-plugin-transition-link。我不确定您尝试过哪一个，但这个有效并且具有更清晰和更语义化接近。

它允许您创建自定义动画或使用一些默认或预定义的动画，您可以查看其演示站点here，其中有一些过渡的示例。

对于预定义的过渡（最简单的方法），您只需要导入 de 组件并像这样使用它：

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

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

对于自定义转场，需要定义deentry并退出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>

欲了解更多信息，请查看他们的docs。

【讨论】：