v3.0.2
Changes
- Now using
loading.jsx
instead ofpending.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.