Become a member
to unlock all features

Level Up!

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


    Add routing to your React Application using `@reach/router`

    Sara VieiraSara Vieira

    In this lesson, we will be adding routing and two routes (homepage and about page) to a React application using the @reach/router library



    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 Router from Reach Router. I'm going to import, and it's not the default export, so import { Router } from "@reach/router."

    In order to use it, I'm going to create two different components, one for a home page and one for a fictitious About page. I'm going to say, const home page equals -- this is going to render in h1 -- saying home page, like this. Then, I'm going to do the exact same thing for the About page, so About and About.

    In order to use this, we need to first wrap a component around it. We say, router, and we close it. We don't allow React to do that. Another way we use it, is that we put the home page...For example, I put home page here and mount it, and then I give it a path, so where is this actually going to show.

    I say, path equals just this, like this, and I close it.

    This means that now, it will actually say home page. If I want to add an About I can do the same thing. I can say add slash about, and I can say About.

    You can't see anything now, because it renders the home page. If I go to About, it renders the About page. If I go back, it renders the home page. This is how you can add Reach Router to your React application.