Add routing to your React Application using `@reach/router`
In this lesson, we will be adding routing and two routes (homepage and about page) to a React application using the @reach/router library
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.