Skip to content

Commit 8e9c434

Browse files
committed
readme updated
1 parent 5415e9c commit 8e9c434

File tree

1 file changed

+32
-2
lines changed

1 file changed

+32
-2
lines changed

README.md

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,9 @@ export default App;
137137
| `app/blog/[slug]/loader.jsx` | Data loader for `/blog/:slug` |
138138
| `app/loading.jsx` | Loading UI while data is fetched |
139139

140-
## 🧪 useAppRouter Hook
140+
141+
142+
## 🪝 useAppRouter Hook
141143

142144
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.
143145

@@ -151,7 +153,35 @@ const MyComponent = () => {
151153
};
152154
```
153155

154-
---
156+
157+
## 🪝 useNextParams Hook
158+
159+
The `useNextParams` hook lets you easily access dynamic route parameters (like `[slug]`, `[...slug]`) in your components. recommended for use in pages that have dynamic segments instead of using `useParams` from React Router.
160+
161+
```jsx
162+
import { useNextParams } from "react-next-router";
163+
164+
export default function BlogPost() {
165+
const params = useNextParams();
166+
// For a route like /blog/hello, params.slug === 'hello'
167+
// For a catch-all route like /blog/a/b, params.slug === ['a', 'b']
168+
return <div>Slug: {JSON.stringify(params.slug)}</div>;
169+
}
170+
```
171+
172+
This hook returns an object with all matched dynamic parameters, similar to Next.js's `useParams`.
173+
174+
## 📦 No Need to Install `react-router-dom` Separately
175+
176+
All core React Router DOM exports (like `useNavigate`, `useLocation`, `Link`, etc.) are re-exported from `react-next-router`.
177+
**You do not need to install `react-router-dom` separately**—just import everything you need directly from this package:
178+
179+
```jsx
180+
import { Link, useNavigate, useLocation } from "react-next-router";
181+
```
182+
183+
This keeps your dependencies simple and ensures full compatibility.
184+
155185

156186
## 🏗️ Route Grouping (like Next.js `(group)` folders)
157187

0 commit comments

Comments
 (0)