Router.md - z22756392z/wp109b Wiki

How the typical website work

We generally start in the browser by typing a url in the address bar and that send a request to the a server for that address and the server handle it.

image

the server is generally gonna send back a full html page which we then view in the browser.

image

now if the user was to click on a link on the website to another page like the contact page it then sends a brand new request to the server image

And then the server responds by sending back a new contact html page

image

Sum

And the cycle would continue over and over and over as we click other page links in the website so we are constantly making requests to the server for new pages.


How React work

Now React applications don't work like this. They delegate all the routing and changing of page content to the browser only.

And it start in the same way, we make an initial request in the browser.

image

The server then responds to that by sending back html page to the browser but also sends back our compiled react javascript files which control our react application.

image

So from this point on react and the react router can take full control of the application so initially the html page that we get back is virtually empty and then react injects the content dynamically using the components that we create.

image

If we then decide to click on a link to a new page the react router is going to step in and intercept that request to stop it from going to the server.

image

And instead it gonna look to at the new page request and inject the required content on the screen. For example, clicking on the contact link the react router will tell react to inject the content component into the browser.

image

Sum

So this is generally the react router work. We assign a top level component for each route or page and that component is dynamically injected into the browser when we visit that route.

Now this whole process means that we are making less request to the server and whole website therefore feels and faster and slicker