无法通过使用graphQL和createPages获得在Gats中工作的转换

Question

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

我不做任何更改就添加了姿势：（https://popmotion.io/pose/examples/route-transitions-reach-router/）

按照上述URL上的说明，我将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：无法读取未定义的属性'map'

如果我扩展console.log的“ location”，则其中没有“ key”

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

Answer 1

我会建议另一种方法，这是我一直用于创建页面过渡（淡入，淡出和其他）的方法：使用gatsby-plugin-transition-link。我不确定您尝试过哪一种，但是这种方法有效，并且语义更简洁方法。