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

Create navigation between pages using  `@reach/router`

Use url parameters in  `@reach/router`

Using  `@reach/router` for navigation in React Apps

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

https://app.egghead.io/api/v1/lessons/react-add-routing-to-your-react-application-using-reach-router/subtitles

Sara Vieira: [00:00] 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."

[00:11] 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.

[00:34] 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.

[00:56] I say, path equals just this, like this, and I close it.

[01:02] 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.

[01:13] 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.

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

Share this video with your friends

Course

Using `@reach/router` for navigation in React Apps