Introduction to React Router

A free video tutorial from Colt Steele
Developer and Bootcamp Instructor
Rating: 4.7 out of 5Instructor rating
29 courses
1,665,995 students
Introduction to React Router

Learn more from the full course

The Advanced Web Developer Bootcamp

Learn React 16, Redux, D3, ES2015, Testing, CSS Flexbox, Animations, SVG, AJAX, and more!

34:08:21 of on-demand video • Updated April 2018

Make REAL web applications using cutting-edge technologies
Build responsive applications using modern CSS technologies like flexbox
Build JSON APIs using Node, Express and MongoDB
Learn the most popular front end library React and master the fundamentals around state, props and the component lifecycle
Use babel and webpack to transpile and bundle code
Understand what the Virtual DOM is and how React performs reconciliation
Leverage Component Lifecycle methods with React to include making AJAX calls properly
Secure Node, Express, Mongo and React applications on the front-end and back-end using bcrypt and JSON Web Tokens
Add routing to a single page application with the most popular routing library for react, React Router.
Manage State with a centralized store using Redux
Connect Redux with a React application to build scalable production applications with client-side state management
Select and manipulate elements in the DOM using D3
Build dynamic visualizations using D3 and SVG
Use D3 to build scatterplots, histograms, pie charts and force graphs
Build compelling map visualizations with GeoJSON and TopoJSON
Master how to handle asynchronous code using callbacks, promises, generators and async functions
Understand how JavaScript handles asynchronous code using the Event Loop with the Stack, Heap and Queue.
Use advanced array methods to build a solid understanding of functional programming
Create dynamic single page applications using AJAX
Structure applications with design patterns using closure and modules
Explain how Object Oriented Programming works with a thorough understanding of the keyword this and the new keyword
Refactor code using call, apply and bind to remove duplication
Use jQuery to build single page applications and understand the limitations of just using jQuery
Create block scope with the let keyword and use the const keyword to prevent variables from being redeclared
Clean up code using arrow functions and master method binding without using the bind keyword
Use default parameters, for of loops and the rest and spread operator to write more concise and more maintainable code
Refactor an ES5 application to use ES2015
Master the new class syntax and create instance methods, class methods
Implement inheritance in ES2015 using extends and super
Leverage newer data structures like Maps and Sets to better solve problems
Learn cutting edge features to the JavaScript language with ES2016, 2017 as well as experimental JavaScript additions
Solve problems similar to what you would get in a developer interview or phone screen
English [Auto]
Next, we'll talk about React Router, a tool that lets us conditionally render components based on the URL and also change the URL. Our objectives will be to describe React router version for differentiate browser, router and hash router and to use link switch and route components. So React Router is a library to manage routing in your single page application in our React apps. And version four was launched in March 2017. So relatively recently from the time of this recording, and it has some big changes compared to version three. So if you're looking at tutorials online, make sure it's talking about version four because the differences between 3 and 4 are pretty large. And version four focuses on a declarative API that uses components to make rendering decisions. We'll see what that means as we go. One of the main components that we'll use when we're setting up our application is a router, and there's two main options a browser router or a hash router. So what's the difference? Well, the browser router uses the history object and it makes changes to the URL, whereas the hash router doesn't use the history object and it makes changes to the hash after the URL. So if you compare these two sets of URLs, the browser router, if we navigate from here to here, changes the URL and then here to here changes it again. So these are all separate URLs. The hash router, on the other hand, isn't modifying the history. Instead it's adding a hash at the end. The hash router can make sense of this hash in order to rerender the page. So bookmarking still works, but I think it's just sort of a weird user experience. So I would always prefer to use the browser router instead of the hash router. Like we talked about before with the bookmarking problem, the browser router requires server side support. The hash router does not require server side support and in my opinion you should always use the browser router if possible. If for whatever reason your setup doesn't allow you to have server side support, then use the hash router, but otherwise always use the browser router. So let's talk about setup. The first thing to install is just npm install, dash, dash, save, react router dom. Now there are other types of react routers. For example, there's a native router for React Native, so make sure that you install the Dom version. React router Dom will have a dependency on the React router core module. And here's what setup looks like in your code. So at the top level of your application, you're going to import browser router and typically I like to rename it as router. And then when I'm rendering my top level component like app, I will wrap it in a router. So this setup is necessary in order to use any of the components that we're going to talk about next. So once we have router set up, the next question is how do we conditionally render something based on the URL? Well, in this example we have two components these stateless functional components called home page and about page, and we have this switch demo component that conditionally renders either this about page or this home page, depending on the current state of the URL. So the root component conditionally renders the component mentioned here as long as this path matches the current URL. But what is this switch component do? Switch essentially makes these routes if elses. So if the first one renders, even if the second one matches, it will not be rendered. So as soon as one renders, none of the subsequent routes will render. We don't need the switch statement at all. We could just have the routes here, but it's usually nice to have just so you don't accidentally render two components that happen to match the same URL. Next up, the link component. So the link component is essentially just an anchor tag, except when you click that link, React router takes over. And rather than doing the default link behavior, the link will use the history object to change the URL. So in this example, we're using the switch demo component that we saw earlier. And then we have two links either a home or an about. If home is clicked on, the URL will be changed to slash, and then the home page component inside of here will be rendered. If about is clicked on, the URL will be changed to slash about and then the about page inside of this component will be rendered. The nav link component is similar to the link component. It's designed for navigation, so it has this additional prop called active style. And whenever you're currently on this path, active style will be active. So in this example, if I'm on the home page on Slash, then the link will be colored red. And if I'm on the about page slash about the link here will also be colored red and then this will be the default style. Let's see this component in action. So in Cloud nine, I've made a project called Routing Demo. And if you look at package.json. We have react and react Dom installed version 16 and then also react router dom and our code is inside of App.js. So I modified the styling slightly. I've given each link a default style of margin five pixels, and then the active style takes away text decoration, makes the cursor default and greys out the link. So let's just see what it looks like. So this is the application. It doesn't look like much, but when I'm on the home page, the URL is slash and you can see this active style is active. Now when I click on the about page, this one is now active. And you'll also notice our content has changed because of the switch demo component. Let's look at that again, just to remind ourselves. So this switch demo uses a switch component and inside two routes. If the route is slash, then we'll render a home page. If the route is slash about, then we'll render about. So let's talk this through one more time. In the app.js, I'll click on a link like slash about the active style will take over, which makes my link gray. And then inside of Switch demo, if we go back here, if the route matches exactly slash about, then the about component will be rendered. So that's exactly what's happening here. When I click on home, the URL changes, which causes this to change. When I click on about again, the URL changes which causes this to change. Next, we'll talk about a few more React router features.