无法使用 graphQL 和 createPages 在 Gatsby 中获取转换

Question

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

在不进行任何更改的情况下，我添加了姿势： (https://popmotion.io/pose/examples/route-transitions-reach-router/(

按照上述 url 中的说明，我将组件/布局.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

当我运行它时，我得到：未捕获的类型错误：无法读取未定义的属性"映射">

如果我展开控制台.log"位置"，则其中没有"键">

除此之外，我还尝试安装官方的盖茨比过渡插件，但这也不能正常工作。它执行进入过渡，但不执行退出过渡。它确实会触发退出的过渡，但直到页面内容更改后才会触发。

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>

对于自定义过渡，您需要定义 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>

有关更多信息，请查看他们的文档。