useRouter and children updated

Author: prasanthreact

README.md

@@ -13,6 +13,7 @@ Supports:
 - **Dynamic routes**
 - **Error boundary**
 - **404 page**
+- **Loader support for data fetching**
 
 Built for **React Router DOM** + **Vite** — simple, fast, familiar.
 
@@ -27,6 +28,7 @@ Built for **React Router DOM** + **Vite** — simple, fast, familiar.
 ✅ Dynamic routes with `[slug]`, `[...slug]`, `[[slug]]`\
 ✅ Error boundaries via `error.jsx`\
 ✅ 404 Not Found handling with `404.jsx`\
+✅ Loader support for data fetching `loader.jsx`\
 ✅ Fully type-safe (TypeScript supported)
 
 ---
@@ -36,7 +38,6 @@ Try it on StackBlitz:
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/react-next-router-example?file=src%2Fmain.jsx)
 
-
 ---
 
 ## 📦 Install
@@ -58,38 +59,57 @@ src/
       │    └── page.jsx       # '/about'
       ├── blog/
       │    ├── [slug]/
-      │    │     └── page.jsx # '/blog/:slug'
+      │    │     ├── page.jsx   # '/blog/:slug'
+      │    │     └── loader.jsx  # Loader for data fetching
       │    └── layout.jsx     # Layout for '/blog/*'
       ├── (admin)/
       │    ├── dashboard/
       │    │      └── page.jsx # '/dashboard'
       │    └── layout.jsx     # Layout for group
-      ├── error.jsx          # Error boundary
-      └── 404.jsx            # Not Found page
+      ├── error.jsx           # Error boundary
+      ├── 404.jsx             # Not Found page
+      ├── pending.jsx         # Pending component (renders while loading)
 ```
 
+
+> You can `loader.jsx` alongside any `page.jsx` to fetch data before rendering the page.  
+> Add a `app/pending.jsx` file to show a loading UI while the loader is running.
+
 ---
 
 ## 🚀 Usage
+
 Example `src/app/page.jsx`:
 ```jsx
-export default function Home() {
-  return <h1>Home Page</h1>;
+export default function Home({ data }) {
+  return <h1>Home Page {data && <span>{data.message}</span>}</h1>;
 }
 ```
+
 Example `src/app/layout.jsx`:
 ```jsx
 export default function RootLayout({ children }) {
   return (
     <div>
       <header>Header Content</header>
-      <main><Outlet></main>
+      <main>{children}</main>
     </div>
   );
 }
 ```
-Example `src/App.jsx`:
 
+Example `src/app/loader.jsx`:
+```js
+// This loader runs before the sibling page.jsx and its return value is passed as the 'data' prop
+export default async function loader() {
+  // You can fetch from any API or return any data
+  const res = await fetch('https://api.example.com/message');
+  const data = await res.json();
+  return { message: data.message };
+}
+```
+
+Example `src/App.jsx`:
 ```jsx
 import { AppRouter } from "react-next-router";
 
@@ -112,6 +132,22 @@ export default App;
 | `app/blog/[slug]/page.jsx`    | `/blog/:slug`            |
 | `app/blog/[...slug]/page.jsx` | `/blog/*` (catch-all)    |
 | `app/blog/[[slug]]/page.jsx`  | `/blog` (optional param) |
+| `app/blog/[slug]/loader.jsx`   | Data loader for `/blog/:slug` |
+| `app/pending.jsx`             | Loading UI while data is fetched |
+
+
+## 🧪 useAppRouter Hook
+You can now use the useAppRouter() hook to get a JSON structure of all matched routes. This is useful when you want to inspect or manipulate the route config manually — for example, inside a custom RouterProvider or createBrowserRouter setup.
+
+```jsx
+import { useAppRouter } from "react-next-router";
+
+const MyComponent = () => {
+  const router = useAppRouter();
+  console.log(router);
+  return <div>Check the console for the matched routes!</div>;
+};
+```
 
 ---
 
@@ -166,6 +202,20 @@ app/
 
 ---
 
+## 🛠️ Loaders (Data Fetching)
+
+Add a `loader.jsx` file alongside any `page.jsx` to fetch data before rendering the page. The returned value will be passed as the `data` prop to the sibling `page.jsx` component.
+
+Example:
+```
+app/
+ └── about/
+       ├── page.jsx
+       └── loader.jsx
+```
+
+---
+
 ## 📝 License
 
 MIT

src/components/appRouter.tsx

@@ -8,19 +8,32 @@ import {
 } from "react-router-dom";
 import { NotFoundComponent } from "./notFound";
 import { ErrorComponent } from "./error";
+import LayoutComponent from "./layout";
+import PageWithLoader from "./pageWithLoader";
 
 type Module = { default: React.FC };
 const basePath = "/src/app";
 
+//importing routes from app
 const notFoundRoute = import.meta.glob(`/src/app/404.{jsx,tsx}`, {
   eager: true,
 }) as Record<string, Module>;
 const errorRoute = import.meta.glob(`/src/app/error.{jsx,tsx}`, {
   eager: true,
 }) as Record<string, Module>;
-const routes = import.meta.glob(`/src/app/**/(page|layout).{jsx,tsx}`, {
+const pendingRoute = import.meta.glob(`/src/app/pending.{jsx,tsx}`, {
   eager: true,
 }) as Record<string, Module>;
+const routes = import.meta.glob(`/src/app/**/(page|layout|loader).{jsx,tsx}`, {
+  eager: true,
+}) as Record<string, Module>;
+
+//other routes
+const NotFound =
+  Object.values(notFoundRoute)?.[0]?.default ?? NotFoundComponent;
+const ErrorElement = Object.values(errorRoute)?.[0]?.default ?? ErrorComponent;
+const PendingComponent =
+  Object.values(pendingRoute)?.[0]?.default ?? NotFoundComponent;
 
 const recursiveRoutes = (
   routePath: string[],
@@ -43,7 +56,14 @@ const recursiveRoutes = (
   }
 
   if (routePath[1] === "layout") {
-    acc[matchedIndex]["Component"] = Component.default;
+    acc[matchedIndex]["Component"] = () => (
+      <LayoutComponent Component={Component.default} />
+    );
+    return;
+  }
+
+  if (routePath[1] === "loader") {
+    acc[matchedIndex]["loader"] = Component.default;
     return;
   }
 
@@ -55,13 +75,19 @@ const recursiveRoutes = (
       Component
     );
   } else {
+    const RouterComponent = () => (
+      <PageWithLoader
+        Component={Component.default}
+        LoadingComponent={PendingComponent}
+      />
+    );
     if (acc[matchedIndex]?.["children"]) {
       acc[matchedIndex]["children"]?.push({
         index: true,
-        Component: Component.default,
+        Component: RouterComponent,
       });
     } else {
-      acc[matchedIndex]["Component"] = Component.default;
+      acc[matchedIndex]["Component"] = RouterComponent;
     }
   }
 };
@@ -85,25 +111,24 @@ const allRoutes = Object.entries(routes).reduce(
   []
 );
 
-export const AppRouter = ({ router = createBrowserRouter }) => {
-  const NotFound =
-    Object.values(notFoundRoute)?.[0]?.default ?? NotFoundComponent;
-  const ErrorElement =
-    Object.values(errorRoute)?.[0]?.default ?? ErrorComponent;
-  const catchAllRoute = {
-    path: "*",
-    Component: NotFound,
-    ErrorBoundary: ErrorElement,
-  };
+const catchAllRoute = {
+  path: "*",
+  Component: NotFound,
+  ErrorBoundary: ErrorElement,
+};
 
+export const useAppRouter = () => {
   allRoutes.forEach((element: RouteObject) => {
     if (element.path === "/") {
       element.ErrorBoundary = ErrorElement;
       element?.children?.push(catchAllRoute);
     }
   });
-  const elements = [...allRoutes, catchAllRoute] satisfies RouteObject[];
+  return allRoutes satisfies RouteObject[];
+};
 
+export const AppRouter = ({ router = createBrowserRouter }) => {
+  const elements = useAppRouter();
   return <RouterProvider router={router(elements)} />;
 };
 

src/components/layout.tsx

@@ -0,0 +1,36 @@
+import React, { PropsWithChildren } from "react";
+import { OutletProps, Outlet } from "react-router-dom";
+
+/**
+ * A special component that wraps a Layout component with an
+ * `<Outlet />` so that nested routes can be rendered inside the
+ * layout.
+ *
+ * @example
+ * // app/layout.jsx
+ * import { LayoutComponent } from "react-next-router";
+ *
+ * export default function Layout({children}) {
+ *   return (
+ *     <div>
+ *       <h1>My Layout</h1>
+ *       <LayoutComponent>
+ *         {children}
+ *       </LayoutComponent>
+ *     </div>
+ *   );
+ * }
+ */
+const LayoutComponent = ({
+  Component,
+}: {
+  Component: React.FC<PropsWithChildren<OutletProps>>;
+}) => {
+  return (
+    <Component>
+      <Outlet />
+    </Component>
+  );
+};
+
+export default LayoutComponent;

src/components/pageWithLoader.tsx

@@ -0,0 +1,49 @@
+import React, { FC, PropsWithChildren } from "react";
+import { useLoaderData, useNavigation, LoaderFunction } from "react-router-dom";
+
+type PageWithLoaderProps = {
+  Component: React.FC<PropsWithChildren<{ data: any }>>;
+  LoadingComponent: React.FC;
+};
+/**
+ * A special component that wraps a Page component with a
+ * loader. It waits for the data to be fetched and then
+ * renders the Page component with the fetched data.
+ *
+ * @example
+
+ * // app/loader.jsx
+ * export const loader: LoaderFunction = async () => {
+ *   // fetch data
+ *   return data;
+ * }
+ *
+ * // app/page.jsx
+ * export default function MyPage({data}) {
+ *   return (
+ *     <div>
+ *       <h2>My Page</h2>
+ *       <p>{data.message}</p>
+ *     </div>
+ *   );
+ * }
+ *
+ * // app/pending.jsx
+ * export default function MyLoadingComponent() {
+ *   return <div>Loading...</div>;
+ * }
+ */
+const PageWithLoader: FC<PageWithLoaderProps> = ({
+  Component,
+  LoadingComponent,
+}) => {
+  const navigation = useNavigation();
+  const loaderData: any = useLoaderData();
+  return navigation.state === "loading" ? (
+    <LoadingComponent />
+  ) : (
+    <Component data={loaderData} />
+  );
+};
+
+export default PageWithLoader;

src/index.tsx

@@ -1,2 +1,3 @@
 import AppRouter from "./components/appRouter";
+export * from "./components/appRouter";
 export default AppRouter;