useRouter

Der useRouter-Hook ermöglicht es Ihnen, Routen in Client-Komponenten programmgesteuert zu ändern.

Empfehlung: Verwenden Sie die <Link>-Komponente für die Navigation, es sei denn, Sie haben eine spezifische Anforderung für die Verwendung von useRouter.

app/example-client-component.tsx

TypeScript

'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 }): Führen Sie eine clientseitige Navigation zur angegebenen Route aus. Fügt einen neuen Eintrag in den Verlaufsstapel des Browsers hinzu.
router.replace(href: string, { scroll: boolean }): Führen Sie eine clientseitige Navigation zur angegebenen Route aus, ohne einen neuen Eintrag in den Verlaufsstapel des Browsers hinzuzufügen.
router.refresh(): Aktualisieren Sie die aktuelle Route. Stellen Sie eine neue Anfrage an den Server, holen Sie Datenanfragen erneut und rendern Sie Server-Komponenten neu. Der Client führt das aktualisierte React Server Component-Payload zusammen, ohne nicht betroffene clientseitige React- (z. B. useState) oder Browser-Zustände (z. B. Scroll-Position) zu verlieren.
router.prefetch(href: string): Prefetchen der angegebenen Route für schnellere clientseitige Übergänge.
router.back(): Zur vorherigen Route im Verlaufsstapel des Browsers zurücknavigieren.
router.forward(): Zur nächsten Seite im Verlaufsstapel des Browsers vorwärts navigieren.

Hinweis:

Die <Link>-Komponente prefetcht Routen automatisch, sobald sie im Viewport sichtbar werden.

refresh() könnte das gleiche Ergebnis reproduzieren, wenn Fetch-Anfragen zwischengespeichert werden. Andere dynamische APIs wie cookies und headers könnten die Antwort ebenfalls ändern.

Migration von `next/router`

Der useRouter-Hook sollte bei Verwendung des App Routers aus next/navigation und nicht aus next/router importiert werden
Der pathname-String wurde entfernt und durch usePathname() ersetzt
Das query-Objekt wurde entfernt und durch useSearchParams() ersetzt
router.events wurde ersetzt. Siehe unten.

Vollständigen Migrationsratgeber anzeigen.

Beispiele

Router-Events

Sie können Seitenänderungen überwachen, indem Sie andere Client-Komponenten-Hooks wie usePathname und useSearchParams kombinieren.

app/components/navigation-events.js

'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)
    // Sie können jetzt die aktuelle URL verwenden
    // ...
  }, [pathname, searchParams])
 
  return '...'
}

Die können in ein Layout importiert werden.

app/layout.js

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>
  )
}

Hinweis: <NavigationEvents> wird in einer Suspense-Grenze eingebettet, da useSearchParams() während des statischen Renderings clientseitiges Rendering bis zur nächstgelegenen Suspense-Grenze verursacht. Weitere Informationen.

Scrollen nach oben deaktivieren

Standardmäßig scrollt Next.js beim Navigieren zu einer neuen Route zur Seitenoberseite. Sie können dieses Verhalten deaktivieren, indem Sie scroll: false an router.push() oder router.replace() übergeben.