Introduction to React Router

Colt Steele
A free video tutorial from Colt Steele
Developer and Bootcamp Instructor
4.7 instructor rating • 11 courses • 1,079,393 students

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 to 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 four, differentiate browser router and hash router and to use link, switch and root 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 difference is between three and four 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 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 this 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, change the URL and then here to hear changes that again. So these are all separate URLs. The hash rider, 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 render 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 set up the first thing to install, just npm install, dash, dash, save reactor at Dom. Now there are other types of reactor routers. For example, there's a native router for REAC native, so make sure that you install the DOM version reactivated. Dom will have a dependency on the reactor at 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 Rueter set up, the next question is how do we conditionally render something based on the Earth? 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. What does this switch component to switch essentially makes these routes if elss 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 roots here. But it's usually nice to have just so you don't accidentally render two components that happened 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 reactor or 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 at home or in about. If home is clicked on, the URL will be changed to slash and homepage component inside of here will be rendered. If a bout is clicked on, the URL will be changed to slash about and then the about page inside of this component will be rendered. The naval component is similar to the land 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 homepage on Slash, then the link will be colored red. And if I'm on the about page about the link here will also be color 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 abcess. So I've modified the styling slightly, I've given each link a default style of margin, five pixels, and then the active style takes away tax decoration, makes the cursor default and grays 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 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 will render homepage page. If the route is slash about, then render about. So let's talk this through one more time in the U.S., I'll click on the link, like 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 reactive outer features.