All language subtitles for 002 What is Routing & Why__en

So what exactly is routing then,

and why would we wanna add it to our React Application?

Well, I touched on it in the last lecture already.

At the moment all the React Apps we built in this course,

have the disadvantage that they have the same URL

no matter where in this app we are.

And therefore if we wanna share a URL,

a link to a certain feature

of one of the websites we're building,

we can only share a link to the starting page.

And then users have to navigate

to a specific feature manually.

Now in reality, you want websites

where you have different paths,

and those different paths in the URL load different pages

so that when the URL changes,

we change the visible content of the page.

We load different pages for different paths

and it's then the combination

of all those pages with their own paths

that make up the overall website.

That is how the web works,

and that is how our React App should work as well.

We have different visual elements,

we have different pages if you wanna call it like this,

and each page should have its own URL

or its own path after our domain.

And when that path changes,

the visual content of the page should change.

Now when we're not working with React,

when we have a traditional Multi-Page App

where we have some server

which sends back different HTML files,

we would typically build something like this

by simply storing different HTML files on the server,

or by generating those files dynamically on the server.

And then for requests to different URLs,

different HTML pages are sent back to the client

and these pages can then be rendered by the browser.

Now this approach works,

but it's not the approached we used

up to this point in the course.

Because when we use different HTML pages,

we don't have a Single Page App,

and that means that whenever we change the URL,

we leave our running client side app.

We lose all the state there.

We have to wait for, to request response cycle

and we have to let the browser render this new page.

And that's one of the reasons why we switched to React.

We don't wanna have this traditional flow.

Instead we wanna load a client side application

so a JavaScript web app, which runs in the browser,

and we wanna utilize this application

to change what's visible on the screen with JavaScript

so that we can provide this very instant

reactive user experience,

which we can do with JavaScript in the browser

and fetching different HTML pages doesn't fit in there

because there we leave the browser request a new page

rendered in new page,

and that's not this reactive experience

which we typically wanna offer.

So this approach doesn't work here.

We still wanna build a single page application step.

And now the good news is that we can do that.

We can continue building a Single Page Application

and we therefore only have one HTML page,

which is initially loaded

when a user first visits our website

and then thereafter we have JavaScript to take over.

But the good thing is that

we can also take a look at the URL and manipulate the URL

and that path after our domain with JavaScript,

and we can deal for also write or use some client site,

some React code, which controls the URL and which changes,

what we see on the screen, when that URL changes

or when a link is clicked without fetching a new HTML file.

So we need some code that works with the URL

that works with that path after the domain

and THERE listens to clicks on links on our page

to update that path into URL,

but which then actually does not send a request

to the server for a new HTML file,

but in stat, this code, which we write*

or does package which we add

should block does browser default.

And instead update, what's visible on the screen

with client side JavaScript with React.

So we want the package, which does all that routing

and which looks at the URL

and brings different components

onto the screen based on URL changes.

But which does all of that in the browser,

we need to write code that does that

or we use a third-party package that does that.

And thankfully there is a third party package for that.