How to call Multiple Apis on the same page or component using createBrowserRouter ?

If we want to call multiple APIs when loading a particular page or component using createBrowserRouter, the best place to do that is in the loader function of the route.

Genarally we use createBrowserRouter as follows.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Dashboard from 'Components/Dashboard';
import dashboardLoader from 'loaders/dashboardLoader';


const App = () => {
     
    const router = createBrowserRouter([
         {
          path: "/dashboard",
          element: <Dashboard />,
          loader: dashboardLoader,
         }
   ])

    return <RouterProvider router={router} />
}

Here in the above example, the best place to call multiple APIs is dashboardLoader. In the similar way we use a loader of any specific page where we will call required number of API calls.