Anchor tag: it reloads the web page.

Link tag: It is the same as the anchor tag but it doesn't reload the web page and instead of the href attribute we can use the " to" attribute. Syntax : <Link to="path">

Nesting routes: Note: you can not use the / symbol inside the nested route component otherwise it will raise an error. Normal routes: Normally / is also optional but it is good practice.

Outlet: outlet actually defines processely that where the inside component it should appear, whether it should appear at the top of it or bottom of it.

Mounting: mounting is nothing but loading or rendering the component.

Steps to handle react-router: First, wrap the main ( app ) component inside the browser router component. Second, create the components that need to be rendered at different URL paths Third, configure the routes using the route component.

Components: Router: a router is a top-level component that can contain multiple route components. Each route will accept a path prop that corresponded to the path in the browser URL and the Corresponding react component is rendered when the path URL is matched

Link: it is used to add the links. The link Component is equivalent to the anchor tag. Syntax: <Link to =" path " > link name </link>

NavLink: it is used to add the style for current active link. NavLink is specifically meant for building components like navbars, breadcrumbs, etc. To highlight the currently selected item and provide useful context with the screen reader. If we want to navigate to two routes from other parts of the app, the link should be the component to use as would want the active class to be applied when is not needed.

To style that active with the help of a.active

a.style{
	// Code
}

UseNavigate: it is used to navigate one component to another component (bio-direction) -1 means back Steps: 1). Import the UseNavigate hook from react-router-dom. 2). Create a variable and store the UseNavigate hook

 Example: const navigate= UseNavigate ();

3). Bind the logic function to the event, when the time of user presses the button. Syntax: event ={ ()=> navigate (route path)} Example: onClick ={ ()=> navigate (order)} -- forward onClick ={ ()=> navigate (-1)} -- backwards

UseNavigate hook: it accepts two parameters -> call back function -- with the help of this, you can navigate from one component to another component. It changes the history stack -> remove: true -- with the help of this, to navigate from the current component to close the application instead of navigating to previous Component.