Scribd
Upload
18 views3 pages

React Routing Explained: SSR & CSR Guide

Routing allows for seamless navigation between different sections of a web application without refreshing the browser. React Router is a library that facilitates both client-side and server-side routing, enabling the creation of single-page applications. Key concepts include BrowserRouter for client-side routing, CreateBrowserRouter for modern routing configurations, and the importance of routes and the Link component for navigation.

Uploaded by

untwalnainshi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views3 pages

React Routing Explained: SSR & CSR Guide

Routing allows for seamless navigation between different sections of a web application without refreshing the browser. React Router is a library that facilitates both client-side and server-side routing, enabling the creation of single-page applications. Key concepts include BrowserRouter for client-side routing, CreateBrowserRouter for modern routing configurations, and the importance of routes and the Link component for navigation.

Uploaded by

untwalnainshi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

React Routing – Complete Notes

1. What is Routing?

Routing means changing the page or screen in a website without refreshing the entire browser. It allows
smooth and fast navigation between different sections of a web application.

2. Server Side Rendering (SSR)

In SSR, the server prepares the full HTML page and sends it to the browser. Example:
Reading a newspaper — it is already printed and prepared before you receive it.

3. Client Side Rendering (CSR)

In CSR, the browser first loads a basic page, then JavaScript creates the UI.
Example: A movie set — the scene is created after everyone arrives.

4. React Router

React Router is a third party library used to add routing (navigation) in React applications. It supports both
client side and server side routing and helps build single page applications.
5. BrowserRouter

BrowserRouter is the older way of using React Router for adding client side routing. It uses the HTML5 History
API (pushState, popState, replaceState) to change URLs without reloading the page.

6. CreateBrowserRouter

CreateBrowserRouter is the modern routing system introduced in React Router v6.4+. It allows routes, actions,
loaders, and error pages to be defined in one configuration. It is part of the Data Router API.

7. Data Router API

The Data Router API helps handle navigation and data loading together.
It can load data before showing a page, handle form submissions, and manage errors.

8. HTML5 History API

A browser feature that lets React Router change the URL without refreshing the page.
This makes navigation fast and smooth.

9. What are Routes?

Routes are the collection of all the paths defined in a React application. Example: /home, /about, /contact.
10. What is a Route?

A Route represents a single path of the application. When the URL matches that path, the related component
is displayed.

11. What is the Link Component?

Link is used to navigate between pages without refreshing the page. It replaces the traditional HTML anchor
tag in React routing.

12. Client Side Routing

In client side routing, only the required component changes while the page remains loaded.
Navigation is instant and smooth.

13. Server Side Routing

In server side routing, every page change makes a request to the server. This is slower compared to client side
routing.

14. Why Routing is Important?

It avoids full page reloads, makes the website fast, improves user experience, and helps build real single page
applications.

You might also like