Become a member
to unlock all features

Level Up!

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


    Create navigation between pages using `@reach/router`

    Sara VieiraSara Vieira

    In this lesson, we will use the @reach/router library to create navigation that will take us to different pages in our application.

    We will create a homepage and about page and switch between these without page re-renders



    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




    Sara Vieira: Let's import also, Link from '@reach/router'. This will allow us to create our navigation. Let me start by defining a nav that's empty, so nav, and closing this nav. Also, since I have two JSX elements that are adjacent -- I think that's how you say it -- let me do this. Now I can add a link in here.

    If I say Link to -- instead of href, we say to -- and I add a forward-slash, and I say home page. I close this Link, let me save, and now we have a link to the home page that does absolutely nothing, because we need to add the new one. Let me say, <Link to, and let me say, about, and I'm going to put About. Now if I try to navigate, everything works.

    As a side-note, you can add the slash or not add the slash, both things work. Also, in here, so if I delete these two slashes, everything still works fine. This is how you can add a navigation using Reach Router.