Summary

React Router Setup for About and Products Pages

In this lecture, we learned how to set up React Router to create routes for the About and Products pages in a React application.

Key Points Covered:

Initial State:
- The application currently does not properly route to the About or Products pages; all routes end up on the main page.
Installing React Router:
- React Router version 3 has already been installed using NPM.
Setting Up the Router:
- Open the src/index.js file to update the rendering of the application.
- Import necessary components from React Router: Router, Route, and HashHistory.
Render the Router:
- Replace the rendering of the App component with the Router, using HashHistory.
- Inside the Router, define the routes using the Route component.
- Example:
```
<Router history={HashHistory}>
  <Route path="/about" component={About} />
</Router>
```
Handling the Default Route:
- A default route for the main page can be set up as follows:
```
<Route path="/" component={App} />
```
Setting Up Routes for Products Page:
- Similar to the About page, the route for the Products page is created:
```
<Route path="/products" component={Products} />
```
Testing Routes:
- Check the URLs to ensure that the routes are functioning properly. The application should now navigate to the correct components without throwing errors.

Summary of Implementation:

We initiated the routing by replacing the main component with the Router.
We defined the Routes for About and Products, and added a default route to handle navigation back to the main page.
The use of HashHistory adds a hash to the URLs, which is a characteristic of this routing method.

Overall, this setup allows us to easily manage routing in our React application, enabling users to navigate between different pages seamlessly.

Next Steps: Continue to experiment with creating and managing additional routes as needed.

End of Lecture

Video Transcript

Welcome back. In this lecture, we're going to look at how to hook up React Router and create our routes for the About and Products page. As you can see here in the screen, we have the About and Products page. What we would like to be able to do is when we say slash about, it goes to the About page and when we say slash products, it goes to the Products page. Right now, it doesn't do that, right? If you go to the React app here, tab, and you say, I want to try to go about, and decide to go to products, it all ends up in the same place. Of course, showing our products because we had tested our products, but let's replace this with, this is the main page. If we save this, I replace that content with, this is the main page app. If you can see, you can go to products, you can try to go anywhere, and it says right here, we don't care about that. It says we can try to go any route and it all ends up in the same place, which is the app component. We want to change that. How can we introduce a routing system using React Router version 3? Remember, we already installed React Router version 3 using NPM. Now we need only, in part, its components and hook it up. Let's go to the text editor. We want to go back to that file that injects the application, the app, into the root div. If you go to src.index.js, and we have this called, ReactDom.Render, the app component itself. Instead of the app component itself, right here, what we want to do is add, make it render the router from React Router. What I'm going to do is, here, I'm going to import the necessary components from React Router. We're going to import, don't forget the braces, we're going to need the router itself, and then we're going to need the route. And then we need some kind of history. There are many kinds. There's a hash history, browser history. Let's get started with the hash history. Let's start with the router from React Router. First we import the necessary components here, router, the route, and the hash history. Now let's learn how to use these. Here in the ReactDom.Render, let's break a line for these guys to make it easier to see. Now instead of app here, we're not going to render that app component anymore. We're going to render the router. Okay, router. That's from React Router. Now this router, it needs you to tell it what kind of history are you using. In this case, we're going to use the hash history. So take this guy, and you're going to include hash history there. So the router is going to use hash history. Now inside, within the router, as is children, you place the routes. Okay, so we're going to use the route component. Now this route is going to take first where you want it to route to. What's the path? So you say path, it's the first prop you're going to need. The second prop is the component that you want to render in that path. So for path, let's say the first one we need the slash about, right? So we can say slash about in this way. Now the path to this route is slash about. And when the user tries to go to this path slash about, I want you to render the component as follows. In this case, we want to render the about component, right? So we say about here. But to use it here, we have to import it. So let's import about from about, right? Now let's test this out. Let's see if there are no problems here. So let's remove everything from the URL and go back to localhost 3000. We can see on warning here react router location slash did not match if I increase did not match any routes. That's because we did not include a default route there. This route is not defined. But if we go to about, you can see now it goes to the about page. Okay. So it works now. But if you try to go anywhere that doesn't exist is going to give you the location error here. Warning, actually. Okay, so we define the about like this for the main page. Maybe we can leave it as app. So how can we route the slash like this to the app component? Let's do it together. Before this about route, let's route. Let's write route. Now what's the path? It's just slash. Now what component do we want to render for slash? Let's just render app. Okay, let's save it and see what happens. Okay, this is the main page app. So it's now everything's okay. All right. Now if you notice here in the URL, there's always this hash appearing right after the host in the part here. This is because we're using hash history. So hash history makes use of the hash here after the host in port. Always like this. It's always the hash slash whatever the route is slash about slash whatever products we're going to create it right now. Okay, so let's get back and create the route for the products page. I want to see you do it. How about you pause the video and do it yourself. And then we go on together after that. So how did it go? Everything okay. So let's go in. We're going to write the route path to products. The component is going to be what products? Don't forget to close the route here. All right. Now let's import products since we're using it. Import product from products. I forgot. Yes. Okay, let's save it. Now let's test it out. You can see it already worked right away. Let's go to the main page and let's go to slash products. So now it's working. Now let's go back to about. Okay, so we have set up react router and the routes for application. Okay, so let's review what we did. So to establish a routes. We went to the place where the react application is injected into the DOM using react dom.rnr. There instead of the app component, we replaced that with the router from react router. Now this router needs to know what kind of history you're going to use in this case we use the hash history, which by the way adds that pound sign to the URL. Then inside the router component as children we passed the routes without an R. Okay, the route component. This route component takes a path and a component. So at certain path that is specified, please render this component as such. Okay, so router component with the route components nested inside with a path and a component. Okay, hope you have liked this lecture in until the next time. Bye.