13- Theory for Single Page Application and React Router
Single Page Application in ReactJS
A Single Page Application (SPA) is a website or web application that dynamically rewrites an existing web page with new information from the web server.
In a React application, components retrieve site content and render it to a single HTML file in your project.
OR
A Single Page Application is where the server sends what you need with each click, and the browser renders that information without the need to reload the page again.
Multi Page Application(Traditional Webpages)
In multi-page application every change requests rendering a new page from the server in the browser. So during a jump from one page to another, a browser reloads the content of a page completely and downloads the resources again.
Advantage of a Single Page application
A single page application has several advantages over traditional web applications. Here are some of the most notable:
Simplicity:
SPAs are easier to develop and maintain than traditional web applications. Developers only need to build a single HTML file for the SPA. No server-side changes are necessary.
Reusability:
You can reuse the same JavaScript, CSS, and HTML code for multiple pages, and there are tools that allow developers to package these components into reusable modules.
Security:
SPAs make it easier to secure web pages, because they can be protected by a firewall or require login credentials.
Load Time:
Once the single page app is loaded, the amount of data traveling between the client device and the server is very small, so load times are minimized.
What is Routing ?
Routing is the process of path selection in any network. A computer network is made of many machines, called nodes, and paths or links that connect those nodes. Communication between two nodes in an interconnected network can take place through many different paths. Routing is the process of selecting the best path using some predetermined rules.
OR
Routing is the process of redirecting a user to different pages based on their action or request.
React Router
It enables the creation of single-page web or mobile apps that allow navigating without refreshing the page.
React Router is a JavaScript framework that lets us handle client and server-side routing in React applications.It also allows us to use browser history features while preserving the right application view.
Components in React Router
There are two types of router components:
<BrowserRouter> : It is used for handling the dynamic URL.
<HashRouter> : It is used for handling the static request.
We will be focusing on <BrowserRouter>
Main components of React Router
BrowserRouter:
BrowserRouter is the parent component used to store all other components.
BrowserRouter is a router implementation that uses the HTML5 history API (pushstate, replacestate, and popstate events) to keep your UI in sync with the URL.
Routes:
They couple URL segments to components, data loading and data mutations.
NOTE : Earlier version Switch but in Routes instead of traversing in sequence, routes are selected based on the best match.
Route:
A route is a conditionally shown component that provides UI when its path matches the current URL.
Links:
The Links component creates links for different routes and implements navigation around the application. It works as an HTML anchor tag.
Explain React Router components with dummy code:
The code works on webpage in following manner
1- There are four components
---> Navbar
---> Alert
---> About
---> TextForm
2- Navbar and Alert will always be rendered irrespective of the URL
3- TextBox will be rendered when url is "/"
3- About will be rendered when url is "/about"
Image 1 : BrowserRouter
Comments
Post a Comment