)
}
```
### Reading from URL in Loaders
You can also pass the full URL or Request object:
```tsx theme={null}
export async function loader({ request }: LoaderFunctionArgs) {
// Pass the Request object directly
const { q, page } = loadSearchParams(request)
// Or pass the URL
const params = loadSearchParams(new URL(request.url))
// ...
}
```
## How It Works
The Remix adapter:
1. Uses Remix's `useSearchParams()` to read current search params
2. Uses Remix's `useNavigate()` to update the URL
3. Automatically handles route transitions and navigation
4. Provides optimistic updates through `useOptimisticSearchParams()`
## Examples
### Pagination
```tsx title="app/routes/blog.tsx" theme={null}
import { useQueryState, parseAsInteger } from 'nuqs'
import { json, type LoaderFunctionArgs } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
export async function loader({ request }: LoaderFunctionArgs) {
const url = new URL(request.url)
const page = parseInt(url.searchParams.get('page') || '1')
const posts = await fetchPosts({ page, limit: 10 })
return json({ posts, page })
}
export default function BlogRoute() {
const { posts } = useLoaderData