Gatsby
Up and Running with Gatsby: Layouts

Solution: Create a Nav Component

PRO

The solution to the previous assignment to create a navigation bar.

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