- [Speaker] In this section, we're going to be looking at how we can have routing to our React app to make it into a single page application. To do this, we need to understand the roles of the router, route, switch, link components that React Router provides. We also need to be able to define what happens when a user hits a particular route, and how we can link route parameters to actual data to display. So why is this single page application, and more options do we have providing rooting for them? So far, the applications we have looked at on this learning path, have all consisted of a discreet page that contains all of the components displayed at once. One view. Our users expect to be able to navigate through our app, and select which fee they would like to see rather than having to scroll down pages to find it. JavaScript apps need to maintain the data across many views. So requesting new page from the server isn't an option and it would slow our app down anyway. We want to take advantage of the virtual Dom and making as few changes to the actual Dom, we can get away with. So our app is fast and fluid. React Router endorsement not created by Facebook is the standard greeting library for React. It's documentation says, "React Router is a powerful rooting library, built on top of React, that helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what's been displayed on the page. With the frameworks and libraries like angular, use a concept called static routing. In static routing all the routes for the upper declared as part of its in initialization before it renders. This means that the application will know about every possible route it has before it's being shown. React Router follow this pattern until version four. Version four introduced dynamic routing. Now the routing takes place after the app has been rendered. To facilitate this, the part of the application that needs to be routed is wrapped in a router component. Child components define link components that link views to the root components path. The route component has prompts which define which component to render when its path prop has been hit. Routing is seen as part of UI and not static config. To keep pace with the one with hooks, React Router version five added its own hooks to help with routing.