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 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

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

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

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

Course

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

Create navigation between pages using `@reach/router`

Share this video with your friends