React Basics IV Flashcards
What is React Router?
React Router is a standard library for creating dynamic routes and navigation in React Applications. It allows you to manage navigation in your app by defining routes that connect the URL paths to specific components.
- BrowserRouter and HashRouter
BrowserRouter: Uses the **HTML5 history API **to keep your UI in sync with the URL.
HashRouter: Uses the hash portion of the URL (i.e., window.location.hash) to keep your UI in sync with the URL.
Components of React Router
- BrowserRouter and HashRouter
- Routes and Route
- Link and NavLink
- Routes and Route
Routes: A container for all your route definitions.
Route: Defines a single route with a path and the component to render.
- Link and NavLink
Link: Creates navigational links in your application.
NavLink: Similar to Link but provides additional styling attributes when the link is active.
Uses of React Router
Navigation and Routing: React Router provides a declarative way to navigate between different views or pages in a React application. It allows users to switch between views without refreshing the entire page.
Dynamic Routing: React Router supports dynamic routing, which means routes can change based on the application’s state or data, making it possible to handle complex navigation scenarios.
URL Management: React Router helps manage the URLs in your application, allowing for deep linking, bookmarkable URLs, and maintaining the browser’s history stack.
Component-Based Approach: Routing is handled through components, making it easy to compose routes and navigation in a modular and reusable way.
What is react-router-dom ?
React Router DOM is an npm package that enables you to implement dynamic routing in a web app. It allows you to display pages and allow users to navigate them. It is a fully-featured client and server-side routing library for React.
React Router Dom is used to build single-page applications i.e. applications that have many pages or components but the page is never refreshed instead the content is dynamically fetched based on the URL. This process is called Routing and it is made possible with the help of React Router Dom.
Types of Routers in React
React provides several types of routers that serve different purposes. The main routers in React are
Browser Router (<BrowserRouter>)
Hash Router (<HashRouter>)
Memory Router (<MemoryRouter>)
Static Router (<StaticRouter>)
Native Router (<NativeRouter>)</NativeRouter></StaticRouter></MemoryRouter></HashRouter></BrowserRouter>
- Browser Router
BrowserRouter is the most commonly used router in React applications that are deployed in a modern web environment.
It uses the HTML5 history API to manage the navigation.
This router makes use of pushState, replaceState, and the popState event to keep the UI in sync with the URL.
It allows for clean and human-readable URLs without hash fragments.
- Memory Router
Memory Router is used when there is no web browser, like in testing or mobile apps. It remembers the navigation history inside the app but does not change the URL. This makes it helpful for testing and non-browser environments.
No URL Change: Unlike Browser Router or HashRouter,
MemoryRouter does not change the browser’s URL. It stores the location state internally.
In-memory history: It maintains history in memory, not in the URL or browser history, making it ideal for non-browser environments.
Server-Side Rendering (SSR): When rendering React components on the server, where there is no URL to manage.
- Hash Router
A Hash Router is another type of router used in React applications. It works by using the hash portion of the URL (the part that comes after the # symbol) to manage navigation.
It uses URL hash (#) to represent different routes (e.g., http://example.com/#/home).
The hash part is not sent to the server but is used to change the displayed content in the browser.
It’s useful for handling navigation in environments where you can’t use regular URLs (like in static websites or when there’s no server-side routing).
React-Router Hooks
useHistory
useParams
useLocation
useRouteMatch
