Routing in React

Introduction

In React, routing refers to the process of managing different views or components based on the URL or user's navigation within a web application. React does not have built-in routing capabilities, but there are several popular third-party libraries that can be used for routing, such as React Router.

React Router is a widely used routing library for React applications. It provides a way to define routes and their corresponding components, allowing you to render different components based on the current URL. Here's a basic example of how to use React Router:
Install React Router: You can install React Router using npm or yarn by running the following command:
```
 npm install react-router-dom
```
In the react router v6.4 we are using createBrowserRouter instead of Browser Router for defining the routes
createBrowserRouter:

This is the recommended router for all React Router web projects. It uses the DOM History API to update the URL and manage the history stack.

Creating Routes

 createBrowserRouter([
   {
     path: "/",
     element: <Root />,

     ],
   },
 ]);

The above example tells us that when the path is / it will load the root component

How to include the routes that we made in the main file as
```
  <RouterProvider router={appRouter}/>
```
What is nested routing:
- Nested routing is called so because the child components are nested inside the parent component. The term "nested" refers to the hierarchical structure created by organizing components within each other.
- By nesting components and routes, you establish a parent-child relationship where the child components are rendered within the context of the parent component. This allows you to create more complex user interfaces with multiple levels of navigation and component composition.
  
  The nested structure enables you to define a hierarchy of components, where each level represents a different section or sub-section of your application. Each parent component can have its own set of routes and child components, allowing for modularization and encapsulation of functionality.
- This nesting concept aligns with the idea of component composition and encourages the separation of concerns within your application. It helps in building maintainable and scalable code by breaking down the UI into reusable and modular components.
- So, when we refer to nested routing, we are referring to the practice of defining routes and rendering child components within a parent component, creating a nested structure within the application's UI.
The parent Component is that component that will remain constant throughout the child.

Creating a Nested Route

 const appRouter = createBrowserRouter([
   {
     path: "/",
     element: <Body />,
     children: [
       {
         path: "/",
         element: <MainContainer />,
       },
       {
         path: "watch",
         element: <Watchpage />,
       },
     ],
   },
 ]);

What is shared UI :
- The concept of shared UI refers to components that are reused across different parts of an application, regardless of whether nested routing or outlets are used.
- Shared UI components can be created and managed separately from the routing structure of an application. These components are designed to be reusable and can be used in multiple places within the application, regardless of whether they are rendered within nested routes or not.
- For example, you might have a header component, a sidebar component, or a footer component that needs to appear consistently across different routes or sections of your application. These shared UI components can be created as separate reusable components and included in the layout or template of the parent component that wraps the nested routes.
- Nested routing allows you to define the structure and navigation within your application, while shared UI components ensure consistency and reusability of UI elements across different parts of the application.
- So, when thinking about shared UI components, focus on creating modular, reusable components that can be used across different routes or sections of your application, regardless of whether you are using nested routing or outlets.
Outlet: Reusing the same piece of code every time is a very bad practice in reacting as it violates the DRY policy (do not repeat yourself )
What outlet will do is it will replace the child components based on the route , hence it can be considered as one use case of using routes

Link to vs Anchor tag

Using the Link component provided by React Router instead of the traditional HTML anchor tag (<a>) has a few advantages:

Preventing Page Reload: When using the anchor tag (<a>), clicking on a link triggers a full page reload, causing the entire application to reload from scratch. This behavior is not desirable in a single-page application (SPA) where you want to maintain the application's state and provide a seamless user experience. The Link component in React Router uses client-side routing, preventing the page from refreshing and providing a smoother transition between routes.
Maintaining Application State: The Link component handles routing internally within the React Router system, ensuring that the state of your React components is preserved when navigating between routes. This is important for maintaining the current application state, including the values in form inputs, component state, or any other data managed within your application.
Routing in Single-Page Applications: In single-page applications, where the entire application runs within a single HTML page, traditional anchor tags (<a>) don't provide the same level of control and flexibility as the Link component. The Link component is designed specifically for client-side routing in React applications and integrates well with React Router, allowing you to define and manage your application's routing structure more effectively.
Handling Active Route Highlighting: The Link component automatically adds an active class to the active route's link, making it easy to style and highlight the currently active route in your navigation menu or any other UI element that uses links.

Overall, using the Link component from React Router offers better control over routing, prevents page reloads, preserves application state, and integrates well with the React Router system. It provides a more seamless and optimized routing experience for React applications compared to using anchor tags (<a>) for navigation.

Routing in React

Table of contents

Introduction

Link to vs Anchor tag