Gatsby Pages

I. Create Gatsby pages

Firstly, we navigate to the /src/pages directory.

We already have an index.js, which is our Homepage.

import React from 'react'

const Home = () => {
  return (
    <div>
      <h2>Hello World</h2>
    </div>
  )
}

export default Home

To create Gatsby pages, we can create new .js file in the /pages directory.

For example, we create a blog page.

src
└── pages
    ├── index.js
    └── blog.js

import React from 'react'

const Blog = () => {
    return (
        <div>
            <h1>This is our blog page</h1>
        </div>
    )
}

export default Blog

II. Creating a 404 page

To create a 404 page, we create a 404.js file in the /src/pages directory.

Users will see this page if they navigate a non-exist page in our Web app.

src
└── pages
    ├── 404.js
    ├── blog.js
    └── index.js

import React from 'react'

const Error = () => {
    return (
        <div>
            <h1>This is our error page</h1>
        </div>
    )
}

export default Error

III. Linking between pages

To have internal linking, we use the <Link /> component.

Example: Add a link to Blog on our Homepage.

• Open the index page component (src/pages/index.js)
• Import the <Link /> component from Gatsby
• Add a component with a to property and a value of “/blog/” for the pathname

import React from 'react'
import { Link } from "gatsby"

const Home = () => {
  return (
    <div>
      <h2>Hello World</h2>
      <Link to="/blog/">Blog Page</Link>
    </div>
  )
}

export default Home