Introduction to React Router

Colt Steele
A free video tutorial from Colt Steele
Developer and Bootcamp Instructor
4.7 instructor rating • 10 courses • 974,515 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] X we'll talk about re-act router a tool that lets us conditionally render components based on the URL and also change the euro object is a way to describe reactor outer version for differentiate browser router and hash router and to use link switch and route components so re-act router is a library to manage routing in your single page application in our re-act 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 3. So if you're looking at tutorials online make sure it's talking about Version 4 because the differences between 3 and 4 are pretty large and version 4 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 use the history object and it makes changes to the URL whereas the hash router doesn't use the ASTRAEA object and it makes changes to the hash after the or. So if you compare these two sets of your Else the browser rodder if we navigate from here to here change the URL and then here to here change that again. So these are all separate. Or else 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 rerun 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 writer 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 installed dash dash save the actor writer Dom. Now there are other types of re-act routers. For example there's a native router for Riak native. So make sure that you install the down version reactor and Dom will have a dependency on the reactor 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 toplevel component like app I will wrap it in a router. So this set up is necessary in order to use any of the components that were coming to talk about next. So once we have router set up the next question is how do we conditionally render something based on the L.. 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 Paige or this home page depending on the current state of the oracle. So the route component conditionally renders the component mentioned here as long as this path matches the current Eurail But does the 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 soon as one renders none of the subsequent route's 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 euro. Next up the linked component so the link component is essentially just an anchor tag except when you click that link reactor out 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 euro will be changed to slash and home page component inside of here will be rendered if about is clicked on the url be changed to slash about and then the about page inside of this component will be rendered the Aveling component is similar to the bling 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 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 routeing demo and if you look at Packards Jaison we have react and react Darman stalled version 16 and then also react routed Dom and our code is inside of Abdus so I'd modify 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 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 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 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 inside two routes. If the route is slash that will render home page if the route is slash about the render about. So let's talk this through one more time in the app just I'll click on a link like Slash about the active style takeover which makes my link gray and then inside of switch demo 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. Right click on about again the URL changes which causes this change. Next we'll talk about a few more reactive router features.