Create a new file in /src/components called NavBar.js. Import React and create a simple function component. Inside of it, move the Link tags for /about and /.

The component will look like this:

export default () => (
  <div>
    <Link to="/">Home</Link> | <Link to="/about">About</Link>
  </div>
)

After that, add the NavBar component to index.js and about.js. Don't forget to clean up the extra links!

In the next video, we'll recap what we've learned about layouts in Gatsby.

 

I finished! On to the next chapter