When creating a single-page web app, routing is how we break up the various functional areas. Routing lets us use URLs to navigate between the logical pages of the application, without having to refresh the browser page. When working with React apps, React Router is the de facto routing solution.
In this course, you'll learn about the underlying concepts of React Router. By following along as Pavan Podila adds routing to a sample application, you'll learn about the React Router API, including configuration, nested routes, navigation, and URL matching.
The app will be built using Webpack and Babel, and it will use the ECMAScript 2015+ syntax.
1. How It Works: React Router
[SOUND] >> Hello, everyone. Welcome to this Coffee Break Course on React Router. My name is Pavan Podila, and in this course we'll take a quick tour of how the React Router works. We'll start off with the basic concepts of React Router such as routes, URLs, and of course route configuration. We'll then jump into a sample application consisting of a dashboard, categories, and products that will see all these concepts in action. We'll build a sample app using webpack, babble, and the ES2015 syntax. We'll gradually build up the route configuration, starting with the main dashboard route and adding more route for categories, products, and reviews. We'll also make use of some router API to creatively configure the links to different routes, re-route component, and receive some parameters, and these can handle inside the component render function. We'll leverage this functionality and change the way we render different components. As we create nested routes, we'll also look at the concept of visual containment, which allows us to create a visual hierarchy of the components. All in all, we'll be covering a variety of concepts. So join me as a take a quick tour of React Router.