1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Navigate to a New Page Programmatically in Gatsby

    Jason LengstorfJason Lengstorf
    gatsbyGatsby

    In cases where a Link doesn’t make sense, but you still need to navigate to a new page — such as a form submission — Gatsby provides a navigate helper for programmatic navigation. In this video, learn how to:

    • Programmatically navigate to a new page using Gatsby’s navigate helper
    • Send state information along with the navigation request
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: In some cases, such as when you're dealing with forms, you won't be using a traditional link. You'll be doing programmatic navigation. For example, when we submit this form, it should take us to a confirmation page. To test that, we can click, and it gives us a surprise.

    Submitting a form means that we need to handle navigation programmatically. To do this, we're going to use the navigate import from Gatsby. In our sign-up page, we can import navigate from Gatsby. In our handle submit, instead of doing it this way, which is not a great idea, we're instead going to navigate. Where we want to navigate to is our surprise page.

    Because we've submitted the form, let's include it. We're going to include the state. The state that we want to include is just the name. The name is set up here, in local state. We can then go into the surprise, grab the location out. Let's add the name. We'll do location.state.name.

    If we go back to our form, we can submit it. We'll see that it remembers what was submitted. It also avoids that jank of fully refreshing the page, giving us a much more app-like experience.

    Discuss

    Discuss