Learn how to create a navigational menu in the page header.
- [Narrator] Hi.…It's time to add some type of navigation inside our page.…Fortunately, we can also do this with React Router…in a very simple way.…For that, React Router exports a new component…called NavLink that you can use to create clickable anchors…in your application…that redirects the user to some other page.…So let's jump to our code and create a navbar on our own.…So this is the current state of our application.…What we to do in this case is to add a menu…or a navbar in the upper-right side of our screen,…and I think the best place for adding that…is inside our header…because also the header gets reused throughout our routes.…
So just go to your code and open your header.js file.…Inside this file, import NavLink…from react-router-dom.…Create a new nav element and render a new NavLink…inside of it.…In this same way Redirex did,…the NavLink also takes a property called to.…This property sets the route…in which the user will be redirected when he clicks…on the NavLink.…
So in this case, let's add a link to our homepage.…
- Structuring React projects
- Creating and mounting the root component
- Composing components for more complex UI
- Using state to making components dynamic
Skill Level Intermediate
React: Managing Complex Interactionswith Emmanuel Henri1h 45m Intermediate
1. How to Structure React Projects
2. Diving into the First Components
3. Styling Made Easy
5. Painless Components Testing
Configure Jest5m 44s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.