Skip to content

v3.0.2

Compare
Choose a tag to compare
@prasanthreact prasanthreact released this 25 Jun 17:24
· 15 commits to main since this release

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.