useRouter
useRouter kancası, İstemci Bileşenleri içindeki rotaları programlı olarak değiştirmenize olanak tanır.
Öneri:
useRouterkullanmak için özel bir gereksiniminiz olmadığı sürece gezinme için<Link>bileşenini kullanın.
'use client'
import { useRouter } from 'next/navigation'
export default function Page() {
const router = useRouter()
return (
<button type="button" onClick={() => router.push('/dashboard')}>
Dashboard
</button>
)
}useRouter()
router.push(href: string, { scroll: boolean }): Sağlanan rotaya istemci tarafında bir gezinti gerçekleştirin. Tarayıcının geçmiş yığınına yeni bir girdi ekler.router.replace(href: string, { scroll: boolean }): Tarayıcının geçmiş yığınına yeni bir giriş eklemeden sağlanan rotada istemci tarafında gezinme gerçekleştirin .router.refresh(): Geçerli rotayı yenileyin. Sunucuya yeni bir istekte bulunma, veri isteklerini yeniden alma ve Sunucu Bileşenlerini yeniden oluşturma. İstemci, etkilenmemiş istemci tarafı React (örn.useState) veya tarayıcı durumunu (örn. kaydırma konumu) kaybetmeden güncellenmiş React Sunucu Bileşeni yükünü birleştirecektir.router.prefetch(href: string): Daha hızlı istemci tarafı geçişleri için sağlanan rotayı önceden getirin.router.back(): Tarayıcının geçmiş yığınında bir önceki rotaya geri dönün.router.forward(): Tarayıcının geçmiş yığınında bir sonraki sayfaya ilerleyin.
Bildiğim iyi oldu:
<Link>bileşeni, görüntü alanında görünür hale geldiklerinde rotaları otomatik olarak önceden getirir.refresh()getirme istekleri önbelleğe alınırsa aynı sonucu yeniden üretebilir.cookiesveheadersgibi diğer dinamik işlevler de yanıtı değiştirebilir.
Migrating from next/router
- Uygulama Yönlendiricisi kullanılırken
useRouterkancasınext/routeradresinden değilnext/navigationadresinden alınmalıdır pathnamedizesi kaldırılmış ve yerineusePathname()querynesnesi kaldırılmış ve yerineuseSearchParams()router.eventsdeğiştirilmiştir. Aşağıya bakın.
Geçiş kılavuzunun tamamını görüntüleyin.
Examples
Router events
usePathname ve useSearchParams gibi diğer İstemci Bileşeni kancalarını oluşturarak sayfa değişikliklerini dinleyebilirsiniz.
'use client'
import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
export function NavigationEvents() {
const pathname = usePathname()
const searchParams = useSearchParams()
useEffect(() => {
const url = `${pathname}?${searchParams}`
console.log(url)
// You can now use the current URL
// ...
}, [pathname, searchParams])
return null
}Bu da bir düzene aktarılabilir.
import { Suspense } from 'react'
import { NavigationEvents } from './components/navigation-events'
export default function Layout({ children }) {
return (
<html lang="en">
<body>
{children}
<Suspense fallback={null}>
<NavigationEvents />
</Suspense>
</body>
</html>
)
}Bilmenizde fayda var:
<NavigationEvents>,Suspensesınırına sarılmıştır çünküuseSearchParams()statik oluşturma sırasında en yakınSuspensesınırına kadar istemci tarafı oluşturmaya neden olur. Daha fazla bilgi edinin.
Disabling scroll restoration
Next.js, varsayılan olarak yeni bir rotaya giderken sayfanın en üstüne kaydırma yapar. Bu davranışı scroll: false adresini router.push() veya router.replace() olarak değiştirerek devre dışı bırakabilirsiniz.
'use client'
import { useRouter } from 'next/navigation'
export default function Page() {
const router = useRouter()
return (
<button
type="button"
onClick={() => router.push('/dashboard', { scroll: false })}
>
Dashboard
</button>
)
}Version History
| Version | Changes |
|---|---|
v13.0.0 | useRouter from next/navigation introduced. |