Routing and Pages

Part of what makes Gatsby sites so fast is that a lot of the work is done at build time. During that process, Gatsby creates paths to access content, handling routing for you. Navigating in a Gatsby app requires an understanding of what those paths are and how they’re generated.

This section of guides show you the different ways to create pages in Gatsby, how to handle navigation between and within pages, how to create a shared layout, and how to compose content:

 Main Guides 4

How to create pages in Gatsby

Gatsby lets you create both unique and templated pages simply by creating React components in a js/.jsx file and placing them in the correct spot within your project. It also provides an "escape hatch" to create pages that don't fit this model well.

How to create a shared page layout

Layout components allow you to share sections of your site across multiple pages; for example, the header, footer, sidebar, navigation, SEO, and analytics scripts.

How to add content using Markdown

With Markdown, you can write and format page content more easily.

How to add components to Markdown using MDX

With MDX, you can add React components to your Markdown files.

 Additional Guides 7

  • Create an authenticated ("client-only") route
  • Restore scroll position when going back
  • Customize Markdown Components with MDX
  • Use MDX Plugins
  • Migrate from Remark to MDX
  • Getting Location Data from Props
  • Working with images in markdown