Page will not load even though a javascript file with its name has been created

I’m new to react and gatsby so I am following the gatsby tutorial online. I was steadily working through Part 2 when I ran into problem. On the tutorial they have created a second javascript file called about.js and added a basic component and exported it at the end. I did all that, granted I typed it all out myself and changed up the text in the html stuff a little but nothing that should affect the outcome of the program too much. But when I go to http://localhost:8000/about/ I get a 404 error and the gatsby development 404 page. To make things worse at the bottom it has a list of pages that it recognizes and http://…/about/ is one of them. Anyone know what is happening here? I will put the code for the home and about page along with screenshots below.

    import * as React from 'react'
    import { Link } from 'gatsby'

    const IndexPage = () => {
      return (
        <main>
          <h1>This is my header</h1>
          <p>This is my paragraph, WOWZA!</p>  
          <Link to='/about'>About</Link>
        </main>
      )
    }

    export default IndexPage

http://localhost:8000/

    import * as React from 'react'
    import { Link } from 'gatsby'

    const AboutPage = () => {
      return (
        <main>
          <h1>About Me</h1>
          <Link to="/">Back to Home</Link>
          <p>Hi there! I'm the proud creator of this site, which I built with Gatsby.</p>
        </main>
      )
    }

    export const Head = () => <title>About Me</title>

    export default AboutPage

http://localhost:8000/about/

I tried rerunning gatsby develop to see if that did anything but it didn’t.