Learn how to install and set up react-router.
- [Instructor] Hi, in this section we are going to talk about routing. We are going to start explaining how routing works in React to create a new route in our application called favorites. Inside this route we are going to enable the user to create his own favorite list of the recipes that we previously loaded. Then we are going to move forward into handling 404 requests and redirects, creating a lever to navigate through the different pages inside of our application. To then, jump on talking about how to share a state between two different routes.
At the end, we're going to talk about how to gain data from the page URL to start creating more dynamic routes. So let's start talking about React-router, how to create a basic routing system. First, we're going to understand how writing works. Then, we are going to start React-router-dom, which is the tool that we are going to use to create the routing and create as I said, a new favorites routes. So React-router is a java script, tool, that enables us to create a declarative routing inside of React application. And when I say React application, I mean both web applications and native applications.
Just a slide by the important comment about React-router is that the version three is very different form the version four, which is the newest one and the one we are going to use. So if you found yourself Googling for information or the commenation, you should please take this into account. The main conponent that we are going to use in React-router is called BrowserRouter. This component uses the HTML history API to keep the UI in sync with a URL. That means that when the URL's changes, React notice it and re-renders his content. And also enables us to change the URL from inside the React code.
Inside the BrowserRouter, we are going to create what is called routes. The route renders some UI when a location matches the route's path. So, you can think the route as a new statement. If the URL matches the path that the route has, it's going to render the component that you're passing it. If it doesn't, it's going to hide it. So, let's take this as an example. When the base is in the index route, in the case I'm going to render the home component. However, the index path matches each URL that you can pass. For example, when you want to go to your slash favorite page. That's why React-router enables us to send a new prompt to the routes.
Which is called, exact. When you send the exact to our route, the component is going to be render if and only if the path matches exactly the URL in which you're located. So, we can solve in this case, the issue of just rendering the favorites component when we are in the favorites URL. Just notice that these are all React components. So we can compose this with the components that we already have, to create, for example, some shared layout between routes. That's very handy for example for rendering a header in each route, without having to define it inside them over and over.
So let's see this in practice. The first thing we are going to do is install the react-router-dom package. When this is finished, initialize your server. So this is where we left our (mumbles). The only difference is that now we want to have a new path called favorites.
Just know this that it doesn't exist for the moment. So let's create it. The first thing we are going to do is to rename the app component and call it Home. Because, now I just want to render this with the path using the index URL, because our app component was the starter point of our application. Create a new (mumbles) file in which we are going to handle the routing of the application. So, import React and create a new app component.
Remember how we said that the BrowserRouter is the main component that we are going to use to create the routing. So just import it from React-router. Now that we have our BrowserRouter, we can start creating routes inside of it. So the first one, we are going to create is the home, so we can have the application in the same point that we had before. This component is going to match the index path of the page and is going to render the home component that I should now import.
I want to export default the app. Okay? Remember you should also import route from the React-router package. So save your file and go to your browser. You should see everything working just fine. Okay? So, next time you create a new favorites path. Instead, and for this URL, instead of rendering the home component, I'm going to re-render a new favorites component then I'm going to create just now.
Remember that before creating it, favorite component I just want to talk about two different things. The first one is that BrowserRouter only upsets one child. So to make it work, we must create a wrapper between both routes. And the other one, is that as we discuss it before, the index path is going to render both a home component, and the favorite component. So just let's exact route to the first route. Cool. So now, create a new file called favorite (mumbles) and this is going to be just a very basic component.
Inside this component for the moment only render a new heading called favorites and export it. Just (mumbles) there. Okay? Save your file and reload your page. Now, if you navigate to slash favorite, we should see the component that we just created. But that's not actually right. It's because the express server is trying to resolve this URL on the backend side. And of course, we don't have any route matching this on the backend side.
We need a way on making React the one that process the URL. Fortunately, there is a very easy way of conferring that. Go to your webpack JSON file and add a new devServer attributes. Inside this object we could setup a new configuration for the webpack devServer called historyApiFallback in which if we set it to true, the server, if says are true, whenever the server receives, a not found request, it's going to be redirecting that request to the in dash HTML file.
By doing that, React will take the slash favorite and render the direct component based on that URL. Before testing it on your browser, you should restart your server. And when you do, just notice how webpack devServer is telling us that "oh, 404" request will default back to the index HTML file as I just said. So now, you can go to your browser and go to your slash favorites and it's working. But something looks weird. And that is that, we don't have a (mumbles) header, in sight above our favorite page. And actually, we want it.
So the first option would be just adding the header inside our favorites component. But actually, we have a way of re-using some layout between routes. And that is by adding some other components inside the BrowserRouter. In this case, I want to add the header. Just import it in this file and I'm going to remove it from the home component.
Inside favorite, instead of rendering an h2, let's render just an h1. So save your files and now when you refresh your page, you will see how the header is always being rendered no matter the route in which you are. So now, you have a routing system set up in your project and a new favorite route to start working with. Congratulations. So in the next video, we are going to talk about how to handle 404 requests.
- Structuring React projects
- Creating and mounting the root component
- Composing components for more complex UI
- Using state to making components dynamic