Summary

Summary of React Router Navigation

Introduction

In this lecture, we focus on how to navigate programmatically in React Router version 3 using code instead of the <Link> component.

Methods of Programmatic Navigation

There are two primary methods to navigate programmatically:

Using the push method of the history object.
Using the router prop that is injected into your component.

Demonstration

Creating a Button for Navigation:
- A button is added to the main page, which will allow navigation to the product page without using a <Link> component.
- The button has an onClick event handler that initially performs a console log on click.
Navigating with hashHistory:
- Import hashHistory from React Router.
- Call hashHistory.push('/products') to change the route programmatically.
- The URL changes to /products upon button click, indicating successful navigation.
Defining a Custom History Module:
- A better practice is to create a file (e.g., history.js) to export a customizable history object. This allows for easily switching between different types of history (e.g., hashHistory or browserHistory) without changing the rest of the codebase.
- Example structure of history.js:
```
import hashHistory from 'react-router/lib/hashHistory';
export default hashHistory;
```
Testing the Custom Module:
- By using history in your components instead of hashHistory, you can easily change the type of history.
- After changing the history type in history.js, the application continues to function correctly as there are no direct references to a specific history type throughout the code.

Conclusion

This method of defining a custom history module prevents the need to update multiple locations in your code if you decide to switch types of routing history.

In the next lecture, the focus will shift to programmatic navigation using the router object passed via props.

Video Transcript

Welcome back everybody. So we've learned a lot of things so far about React Router version 3. Now before we learned how to navigate between pages using that link component, right? Now how do we do that programmatically? That is how can we type some line of code and that statement will cause the route to change. Now that's what we're going to see in this lecture. So there's two ways of navigating programmatically in React Router version 3. The first way is you can use the push method of the history object itself directly or you can use the router prop that is injected into your component. Okay, we're going to look at both of these. So let's get to work. So let's go to the main page for example. This is the initial page welcome. Remember we go back here to the browser to yeah, I should have added a link to the main page. That's a good exercise for you. So this is the initial change welcome whatever. Let's say we have some button here that goes to the product page. It's going to be pretty much redundant, right? Because we already have a link here. So let's say we don't want to do the navigation using the link component. Instead we want to do that in actual code like the programming statement. So let's add a button here that's going to go to products. It's going to be redundant but it's just so we learn how to do this. So let's not use link but actually make a button that when you click it's going to call a function to actually change the route. So let's go. Here in main let's add a button here. Click here to go to products. Yeah, great. So I'm going to break the line here so you can see better. Click here to go to products. So I added a button here, button type button. Click here to go to products. Let's add a div so it breaks the line there. So we don't have to add a br. There you go. Click here to go to products. So what we want to happen is that it goes to the actual products page like so. So the button has the on click, right? And click prop that you pass a method that is going to do whatever you want when you click the button. Usually the method has, let's define it using an arrow function like so. For now let's just do a console log. Click to see if it's actually working. So let's click the button. I see it fire here. You can see it says clicked. Now instead of clicked I want to change route. So the first way of changing route is using the history object. Now what history are we using? If you go back to index.js remember we're using hash history. So the thing is you have to use the history that's being used for the router. So you have to import hash history specifically in this case. So let's import hash history in this file from react router. And then we finally use hash history here and we're going to call the push method of hash history and we're going to pass the actual route to the path. In this case products like so. All right. I don't need to return anything. I'm just returning this explicitly but it doesn't really matter. I don't need the braces for the method because I just have one statement with implicit return. So let's see if it works. Click on products. So it goes to products. The CD URL has changed. All right. So if you go back click again it's working just fine. So this is how you change route programmatically using the specific history. Now the problem with this is what if your app changes the history like you're like here we didn't talk about this before but if you have other kind of history like browser history and then if you want to change route here then you're like you have to change every single statement that uses hash history to browser history. So that's not really cool. That's why I don't like this method that much. There's one workaround for this and that is you define a file that exports the specific history in this case like you're using hash history here right. So you can export that hash history as an object called history and you can change it to be whatever you want. Let me show you. So we're using hash history here right. So for example let's create a file history.js. So in this file we're going to import hash history from react to router and then all you have to do is export. You can use the file or you can use the braces whatever. I'm going to use default. So what I'm going to do is I'm creating an alias for this guy as history. So I'm going to import the hash history but in my code just use history. So I'm going to export the file history here. So like so and then index instead of saying hash history here I'm going to put just history and I have to import that history like so import history from history in this way. Now let's see if this is working. Let me go back to main and let's for now remove this push and put no. Just for now. Now so I define a file history.js that simply imports the hash history in this case as history it just changes the name and it exports the fault that. This doesn't really matter I could have just said hash history here. Alright anyway. Now from the index where we actually pass the history to the router we are passing our history custom history module and that should be have the same effect as before so let's test it out see nothing bad happens. Click product click about everything is okay right so no problem there. Now say I want to change my history to browser history how would I change it I just need to change it here right. I change the browser history here in my history.js and that's all. Now let's test it out you see there's no more hash there because we're using browser history go to about go to products you see it's working just fine. Okay so because of this now we can use finding us back in main. So instead of saying hash history here I can say just history and actually import that history that we define. Like our module custom history so we just say history that push products and it should work just fine let's test it out go to the initial page now this button should trigger the slash products everything's okay so you know hash now if I want to change my history now I don't want to browse the history anymore let's revert back to hash history go to hash3.js now it's hash history. Notice main is unchanged we didn't need to have to change any history statement at all now if you go back here you see now there's a hash there go to products there's a hash so we got around that problem all right define your own custom history module very very simple approach. Okay so that's how you change route programmatically using the history object history.push and you put the path here. In the next lecture we're going to look at how to programmatic navigate using the router object that is passed via props. See you then.