Introduction to React Router

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.