v3.0.8

Most stable version fixed all layout and grouping related bugs

v.3.0.7

• All layout and grouping related bug fixed and code improved

v3.0.6

• bug fixes and code improvement

v3.0.3

layout bug fiuxed

v3.0.2

Changes

• Now using loading.jsx instead of pending.jsx

---

🪝 Useful Hooks

useAppRouter – Inspect All Routes

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.

import { useAppRouter } from "react-next-router";

const MyComponent = () => {
  const router = useAppRouter();
  console.log(router);
  return <div>Check the console for the matched routes!</div>;
};

---

useNextParams – Dynamic Route Params (like Next.js)

The useNextParams hook lets you easily access dynamic route parameters ([slug], [...slug], etc.) in your components.
It’s recommended over useParams when using dynamic segments in your file-based routes.

import { useNextParams } from "react-next-router";

export default function BlogPost() {
  const params = useNextParams();
  // For a route like /blog/hello → params.slug === 'hello'
  // For a route like /blog/a/b → params.slug === ['a', 'b']
  return <div>Slug: {JSON.stringify(params.slug)}</div>;
}

✅ This returns an object with all matched dynamic parameters — just like Next.js's useParams.

---

📦 Simplified Dependency Management

You do not need to install react-router-dom separately.
All core exports from React Router DOM are re-exported directly from react-next-router.

import { Link, useNavigate, useLocation } from "react-next-router";

This keeps your dependencies simple and ensures full compatibility.

v3.0.1

🚀 What’s New in vX.X.X

This update brings several powerful enhancements to react-next-router:

---

🧪 useAppRouter Hook

Now you can access a structured JSON of all matched routes using:

import { useAppRouter } from "react-next-router";

const DebugRoutes = () => {
  const router = useAppRouter();
  console.log(router);
  return <pre>{JSON.stringify(router, null, 2)}</pre>;
};

Useful for custom RouterProvider or advanced route inspection.

---

🔁 Outlet Automatically Becomes children

No need to manually use <Outlet /> anymore!
Your layout.jsx files now receive children directly:

export default function RootLayout({ children }) {
  return <main>{children}</main>;
}

---

📦 loader.jsx Support

Place a loader.jsx next to any page.jsx to fetch data before rendering:

// app/about/loader.jsx
export default async function loader() {
  return { message: "Hello from the loader!" };
}

Data returned will be passed to page.jsx as the data prop.

---

⏳ pending.jsx Support

Add a pending.jsx inside /app to show a loading UI while loader.jsx is running:

export default function Pending() {
  return <div>Loading...</div>;
}

---

That’s it for this release — focused, practical, and ready to level up your routing experience.
Let us know what you build! 🚀

npm - https://www.npmjs.com/package/react-next-router

2.0.9

• bug fixed

v2.0.4

git repo added