All language subtitles for 001 Routing In React_en

Let's talk about routing in a single page application, which is what we're building, we saw that single

page applications are really, really neat.

There's some pros to it, right?

One is that initially when we send the file from the server, we only send the files once an HTML file,

a successful and a massive JavaScript file usually.

Now, back in the day when we clicked on a link, we would go back to the server, ask for a new e-mail

page and that server would send it back with CSS and JavaScript.

This time around, things are a little bit different.

We request the page and then all the navigation happens within here because we don't need to talk to

the server anymore.

The JavaScript file.

Or our library allows us to manipulate the dump so that now our servers can just focus on sending data

instead of focusing on, hey, what view to render, what page dissent, we can just make API requests

and get JSON data back, which is really, really nice.

And now our server, maybe if we had a mobile app as well, can also be used as the same one because

that Jason data can be sent to a mobile phone.

Because we're not going to be sending e-mail files back and forth.

It also makes changing the dam or users interacting with your website faster because it doesn't have

to go back and forth, back and forth to communicate.

But there's also downsides to it.

Now, the idea of server side rendering and single page application is something we'll cover later on

in the course, such as the fact that now we have a bigger JavaScript file.

So it's more data that we have to send from the server to the front end.

But what I want to focus on here is routing.

Remember, reactor's just a UI library, so it doesn't provide a routing for us.

We need to add that functionality.

Unlike Angular, for example, there is a framework and comes with routing pre-built.

React says, I don't care about Ruti.

You figure it out because it's a smaller library.

It lets us pick and choose what routing we want to do.

Do we want to implement our own or do we want to use a library?

Now we're going to be using react router, which I would say is a standard in large react projects.

It's the main one that Riak developers use for routing.

And the problem it tries to solve is the fact that we now don't have that default browser navigation

provided by the browser because the browsers are built around this idea of clicking on links and getting

a new HTML5 and re access while know everything is going to be in jail and we'll just change and update

the and we'll let that little robot change the page for us.

So how do we solve this?

Well, this package we're going to use react router lets us do some interesting things.

For example, if I click on a picture like hats, you see that my Yooralla changed from an empty.

Homepage, two shops hat.

Initially, when single page applications started to take off because single page applications didn't

really have this functionality, you had this backburn problem where you couldn't go back because everything

well, there weren't any links.

This wouldn't happen and this would just keep staying empty.

So when the browser said back, well, it wouldn't work.

And this was a common problem because the navigation inside the application URL didn't change.

But the problem is now solved because the browser provides something called a history API.

And internally libraries like React Router and other single page application routing.

Libraries use this API provided by the browser to essentially hijack and mimic you or else.

So that, as we'll see over the next couple of videos with this library, we can have the same functionality

that we had with apps back in the day, but with a single page applications and still have functionality

where we can go back and forth and use the URL, even enter a specific URL and get to that page.

Let's find out more in the next video.