Without the Link component, users would have to type the correct route into the browser to see the desired page. Eve adds Links to the app routes so that navigation is simpler. Import the Link component. Add a few new icons from react-icons to make the Menu component look great.
- In the previous lesson we successfully set up…routes to different components.…While this works okay,…it's asking a lot from our users.…You have to type the correct route…to navigate to the correct component.…So not that useful yet,…but luckily React Router comes with a component…that we can use to handle navigation.…The place I want to get started is with a new component,…and our new component is going to be called Menu.…So the menu needs a few things to get started,…but let's save it first as Menu.js…So we need to import Link from React Router,…and then we're going to create our menu…as a stateless component,…so we're going to export const menu,…and menu is going to return a nav,…and inside of this nav,…we're going to add a class name of Menu.…
So inside of this,…we're going to use that link component,…so we use it just like a regular component.…And our link is going to have a few different attributes.…And it also will have children,…so let's add three different links here,…and we'll start to fill them out for our different routes.…
- Refactoring elements with JSX
- Transpiling with Babel
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Setting up routes
- Nesting routes
- Creating forms
- Understanding the component life cycle
Skill Level Intermediate
Building an App with React.js and MeteorJSwith Emmanuel Henri4h 20m Intermediate
Building a Polling App with Socket IO and React.jswith Alex Banks3h 56m Intermediate
1. What Is React.js?
2. Intro to JSX and Babel
3. React Components
4. Props and State
5. Using the React Router
6. Forms and Refs
7. The Component Lifecycle
Next steps1m 4s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
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.