React Router and Its Components

What is a React Router?

React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

Components of React Router

1. BrowserRouter

• BrowserRouter: Uses the HTML5 history API to keep your UI in sync with the URL.

2. Routes and Route

• Routes: A container for all your route definitions.
• Route: Defines a single route with a path and the component to render.

3. Link and NavLink

• Link: Creates navigational links in your application.

To apply <Link> import it from the react-router-dom like this👇

import { Link } from "react-router-dom";        

• NavLink: Similar to Link but provides additional styling attributes when the link is active.

To apply <NavLink> import it from the react-router-dom like this👇

import { NavLink } from "react-router-dom";        

Use cases for Link:

1. Basic navigation: Link is suitable for creating links within the application, such as navigation between different pages or sections.
2. Action buttons: Link can also create buttons that trigger navigation when clicked.

Use cases for NavLink:

1. Navigation menus: NavLink is perfect for building navigation menus where we want to visually highlight the active link, giving users clear feedback about their current location within the application.
2. Sidebar or tabbed interfaces: NavLink can be used to highlight the selected tab or menu item when using a sidebar or tabbed interface.

Thank You So Much Bikash Karki Sir :)

#LearningReact #NMC #MERN #Day4