Verlinken und Navigieren

Der Next.js Router ermöglicht clientseitige Routenübergänge zwischen Seiten, ähnlich einer Single-Page-Anwendung.

Eine React-Komponente namens Link wird bereitgestellt, um diese clientseitige Routenübergänge durchzuführen.

import Link from 'next/link'
 
function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Startseite</Link>
      </li>
      <li>
        <Link href="/about">Über uns</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">Blogbeitrag</Link>
      </li>
    </ul>
  )
}
 
export default Home

Das obige Beispiel verwendet mehrere Links. Jeder ordnet einen Pfad (href) einer bekannten Seite zu:

• / → pages/index.js
• /about → pages/about.js
• /blog/hello-world → pages/blog/[slug].js

Jeder <Link /> im Viewport (anfänglich oder durch Scrollen) wird standardmäßig prefetched (einschließlich der entsprechenden Daten) für Seiten, die Statische Generation verwenden. Die entsprechenden Daten für serverseitig gerenderte Routen werden nur geladen, wenn auf den <Link /> geklickt wird.

Verlinken zu dynamischen Pfaden

Sie können auch Interpolation verwenden, um den Pfad zu erstellen, was besonders nützlich für dynamische Routensegmente ist. Zum Beispiel, um eine Liste von Beiträgen anzuzeigen, die als Prop an die Komponente übergeben wurden:

import Link from 'next/link'
 
function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${encodeURIComponent(post.slug)}`}>
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  )
}
 
export default Posts

encodeURIComponent wird im Beispiel verwendet, um den Pfad utf-8-kompatibel zu halten.

Alternativ mit einem URL-Objekt:

import Link from 'next/link'
 
function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link
            href={{
              pathname: '/blog/[slug]',
              query: { slug: post.slug },
            }}
          >
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  )
}
 
export default Posts

Jetzt verwenden wir statt Interpolation ein URL-Objekt in href, wobei:

• pathname der Name der Seite im pages-Verzeichnis ist. /blog/[slug] in diesem Fall.
• query ein Objekt mit dem dynamischen Segment ist. slug in diesem Fall.

Router injizieren

Um auf das router-Objekt in einer React-Komponente zuzugreifen, können Sie useRouter oder withRouter verwenden.

Generell empfehlen wir useRouter.

Imperative Routing

next/link sollte die meisten Ihrer Routing-Bedürfnisse abdecken, aber Sie können auch clientseitige Navigationen ohne es durchführen. Werfen Sie einen Blick auf die Dokumentation für next/router.

Das folgende Beispiel zeigt, wie Sie grundlegende Seitennavigationen mit useRouter durchführen:

import { useRouter } from 'next/router'
 
export default function ReadMore() {
  const router = useRouter()
 
  return (
    <button onClick={() => router.push('/about')}>
      Klicken Sie hier, um mehr zu lesen
    </button>
  )
}

Shallow Routing

Shallow Routing ermöglicht es Ihnen, die URL zu ändern, ohne Daten-Fetching-Methoden erneut auszuführen. Dies umfasst getServerSideProps, getStaticProps und getInitialProps.

Sie erhalten das aktualisierte pathname und die query über das router-Objekt (hinzugefügt durch useRouter oder withRouter), ohne den Zustand zu verlieren.

Um Shallow Routing zu aktivieren, setzen Sie die Option shallow auf true. Betrachten Sie das folgende Beispiel:

import { useEffect } from 'react'
import { useRouter } from 'next/router'
 
// Aktuelle URL ist '/'
function Page() {
  const router = useRouter()
 
  useEffect(() => {
    // Führen Sie Navigationen immer nach dem ersten Rendering durch
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])
 
  useEffect(() => {
    // Der Counter hat sich geändert!
  }, [router.query.counter])
}
 
export default Page

Die URL wird auf /?counter=10 aktualisiert, und die Seite wird nicht ersetzt, nur der Routenzustand ändert sich.

Sie können auch URL-Änderungen über componentDidUpdate beobachten, wie unten gezeigt:

componentDidUpdate(prevProps) {
  const { pathname, query } = this.props.router
  // Überprüfen Sie, ob sich Props geändert haben, um eine Endlosschleife zu vermeiden
  if (query.counter !== prevProps.router.query.counter) {
    // Daten basierend auf der neuen Abfrage abrufen
  }
}

Einschränkungen

Shallow Routing funktioniert nur bei URL-Änderungen auf der aktuellen Seite. Nehmen wir zum Beispiel an, wir haben eine weitere Seite namens pages/about.js, und Sie führen Folgendes aus:

router.push('/?counter=10', '/about?counter=10', { shallow: true })

Da dies eine neue Seite ist, wird die aktuelle Seite entladen, die neue Seite geladen und auf Daten-Fetching gewartet, auch wenn wir Shallow Routing angefordert haben.

Bei Verwendung von Shallow Routing mit Middleware wird nicht sichergestellt, dass die neue Seite mit der aktuellen Seite übereinstimmt, wie zuvor ohne Middleware. Dies liegt daran, dass Middleware dynamisch umschreiben kann und clientseitig nicht ohne Datenabruf überprüft werden kann, der bei Shallow Routing übersprungen wird. Daher muss eine Shallow-Routenänderung immer als Shallow behandelt werden.