Create navigation between pages using `@reach/router`
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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!