React Router

what is React Router?

React Router simplifies navigation on the client side, allowing instant URL updates without fetching new documents. Instead of reloading the entire page, it quickly renders new content and fetches data for a smoother user experience, resulting in faster transitions and dynamic features like animations for engaging web applications.

First you need to install react router library:

npm i react-router-dom

// Then u must to import "createRoot" in your app file
import { createRoot } from "react-dom/client";

// Now U can use it like this 

import * as React from "react";
import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
  Route,
  Link,
} from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <div>
        <h1>Hello World</h1>
        <Link to="about">About Us</Link>
      </div>
    ),
  },
  {
    path: "about",
    element: <About/>,
  },
]);

createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

The createBrowserRouter method takes an array as first argument , each object in that array return to a route . In the previous example we defined 2 routes (objects) , each object have many properties like (path,element,errorElement...).

Now to define our route we must provide two important properties , the first is the path (to define the URL ) and the second is the element to define which component we want to render when user navigate to that route/path.

The element property can be html tag or a component

Nested Routes :

we have talked about routes before , but we didn't go into any explanation about if we have a nested routes. The nested route simply is when u have a route nested to another route like below in table we have profile route that nested to user route--

Type	Route	Nested Route
example	localhost:5173/user	localhost:5173/user/profile

/* Example about nested routes

User
    Profile
            image
                   id

The result will be User/Profile/image/id

Now How to nest routes?

we can nest routes by using children properties inside any route object we want to nest a route relative to it . here an example :

We defined the main route that have the "/" path then we used children property to create nested routes relative to "/"

The result now will be like this

1. Root: localhost:5173

2. Cocktail: localhost:5173/Cocktail

3. about: localhost:5173/about

4. newsletter: localhost:5173/newsletter

const router = createBrowserRouter([
  {
    path: "/",
    element: <HomeLayout />,
    errorElement: <Error />,
    children: [
      {
        index: true,
        element: <Landing />,
        errorElement: <SinglePageError />,
        loader: landingLoader,
      },
      {
        path: "Cocktail",
        element: <Cocktail />,
      },
      {
        path: "newsletter",
        element: <NewsLetter />,
      },

      {
        path: "about",
        element: <About />,
      },
    ],
  },
]);

In the context of the createBrowserRouter function and the provided code, the index property is likely used to specify a default or index route within the nested routes.

both errorElement properties are used to define components that will be rendered in case an error occurs during the loading or rendering of the associated route. However, there is a subtle difference in their usage within the context of nested routes.

In this case, the errorElement: <Error /> is specified at the top-level route ("/") within the createBrowserRouter function. This Error component will be rendered if there is an error at the top level, meaning an error in rendering the HomeLayout component or its children.

In this case, the errorElement: <SinglePageError /> is specified within a specific nested route (index: true, path: "newsletter") under the children property. This SinglePageError component will be rendered if there is an error specifically in rendering the Landing component or if there's an error during the loading process specified by the loader function.

what is Loader?