フラグメントの記法
GatsbyJSで固定ページを作成しようとして、こんな感じにコードを書いてしまうと…
import React from "react"
(略)
return (
<h1>このブログについて</h1>
<h2>GatsbyJSでSPA(Single Page Application)を始めてみる</h2>
<p>SPA(Single Page Application)を始めるには色々な選択肢があって、どれを選べばいいんだろう? と。</p>
)
(略)
怒られます。
Adjacent JSX elements must
be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
言われた通りにコードを修正すると…
import React from "react"
(略)
return (
<>
<h1>このブログについて</h1>
<h2>GatsbyJSでSPA(Single Page Application)を始めてみる</h2>
<p>SPA(Single Page Application)を始めるには色々な選択肢があって、どれを選べばいいんだろう? と。</p>
</>
)
(略)
エラーは表示されなくなると。
省略しない記法だと、次の様な感じ。
import React from "react"
(略)
return (
<React.Fragment>
<h1>このブログについて</h1>
<h2>GatsbyJSでSPA(Single Page Application)を始めてみる</h2>
<p>SPA(Single Page Application)を始めるには色々な選択肢があって、どれを選べばいいんだろう? と。</p>
</React.Fragment>
)
(略)
<>での省略記法と<React.Fragment>の記法は、全く同じものと思っていたんですが、異なる点があるとReactのドキュメントに書かれていました。
layout.js
このブログはgatsby-starter-blogを使っています。
src>components>layout.jsを使うと、(ReactのFragmentを使わずに)簡単に他のページと同じレイアウトにすることが出来ます。
import React from "react"
import Layout from "../components/layout"
import SEO from "../components/seo"
(略)
const siteTitle = data.site.siteMetadata?.title || `Title`
return (
<Layout location={location} title={siteTitle}>
<SEO title="About" />
<h1>このブログについて</h1>
<h2>GatsbyJSでSPA(Single Page Application)を始めてみる</h2>
<p>SPA(Single Page Application)を始めるには色々な選択肢があって、どれを選べばいいんだろう? と。</p>
</Layout>
)
(略)