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 add url parameters to our application using the  `@reach/router` library.

We will use the example of getting the `username` prop from our location to greet a user.

Instructor: [00:00] Let me just add a user component. This is going to say "Hello," because I don't have the username yet. I'm going to say "Hello" and I'm going to close this H1 and then we're going to see how we can add this parameter.

[00:14] Let me do the same thing I have in here. I want to say "user." The path of this is going to be users/username. Let me add a link that is going to go to users/sarah, and this is Sarah. If I do this now, this one's going to say "Hello." To get the props here, I can say props and then I can say props.username.

[00:46] If I do this it now says "Hello Sarah." This is how you can add URL parameters using Reach Router.

Course

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

Use url parameters in `@reach/router`

Share this video with your friends