Summary of Lecture on Changing Routes in React

In the previous lecture, we looked at how to navigate to another page programmatically using the history object. We learned how to make our own custom history module so that we may change the history from hash history to browser history and vice versa, anytime without changing any of the statements in our application. Now let's learn how to change route using the router prop that is injected into our component. Remember that in app.js we had a console logout of this.props. So let's take a look at that one more time. I'm here, I'm going to go to the initial page and let me clear the console and try again. So here's the object, right? So the props object, we receive many props. App component receives many props here. One of the props is called router. And this router provides many methods that are useful for you to change routes and so. What we're interested in is to change another route. This method called push. Okay, so we're going to push a location. Location can be as simple as a string with a path. Okay, so let's take a look. Go back here to the main.js file. We're using history. Now let's use this. Actually let's use props. We have to define the props here. So main takes props to the parameter and then we're going to use props.router.push. So the router is injected via props. You receive that prop called router that has a method called push. It's pretty much the same thing as we did with the history push method. So save it. Try it again. There you go. Products, no problem. All right. So that's how you programmatically change route using the router prop. Very simple, right? So this approach is even simpler than having to import the history and having to define that history module. So depends on you which one you would like to choose. I think one advantage of using the history approach is that you can import it from any file and you can use the history.push. Whereas the router prop is only injected to the app and in this case to the main component but it is not available to the children component of those guys. That is you would have to actually pass them down to those children of main or main component. Okay, so that's one of the things you have to watch out about. But for the most part I would use props.router because usually in my approach to making React applications I usually have an outermost component that includes the router prop and that component is the only guy responsible for switching routes and so on and so on. Programmatically it always takes care of data stuff and that usually boils down to only using the router there and not in the children. Usually I pass those. The children call some methods like send some sort of alert that bubbles up to the parent component, parent most component and the parent most component does the props the router push kind of thing. Alright so I hope you liked the video and please subscribe if you're not already one of my subscribers and please click the like button if you liked it. Thank you so much for watching and I am associated on Twitter. My Twitter handle is nbkhope. Let me show it to you real quick. So I'm Twitter as nbkhope. Let's connect there. Please follow me and thank you so much for watching until the next time. Bye.