Связывание и навигация

Маршрутизатор Next.js позволяет выполнять переходы между страницами на стороне клиента, подобно одностраничному приложению.

Для этого перехода по маршрутам на стороне клиента предоставлен компонент React под названием Link.

import Link from 'next/link'
 
function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/about">About Us</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">Blog Post</Link>
      </li>
    </ul>
  )
}
 
export default Home

В приведенном выше примере используются несколько ссылок. Каждая из них сопоставляет путь (href) с известной страницей:

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

Любые <Link /> в области видимости (изначально или в результате прокрутки) по умолчанию будут предварительно загружены (включая соответствующие данные) для страниц, использующих статическую генерацию. Соответствующие данные для страниц, рендер которых происходит на сервере (server-rendered), загружаются только тогда, когда <Link /> нажимается.

Связывание с динамическими путями

Также можно использовать интерполяцию для создания пути, что полезно для динамических сегментов маршрута. Например, для отображения списка постов, которые были переданы компоненту в качестве свойства:

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 используется в примере для обеспечения совместимости пути с кодировкой UTF-8.

В качестве альтернативы можно использовать объект URL:

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

Теперь вместо использования интерполяции для создания пути мы используем объект URL в href, где:

• pathname — это имя страницы в каталоге pages. В данном случае это /blog/[slug].
• query — это объект с динамическим сегментом. В данном случае это slug.

Ввод маршрутизатора

Для доступа к объекту router в компоненте React можно использовать useRouter или withRouter.

В общем случае рекомендуется использовать useRouter.

Императивная маршрутизация

next/link должен покрывать большинство ваших потребностей в маршрутизации, но вы также можете выполнять навигацию на стороне клиента без него. Обратите внимание на документацию по next/router.

Следующий пример показывает, как выполнить основную навигацию по страницам с помощью useRouter:

import { useRouter } from 'next/router'
 
export default function ReadMore() {
  const router = useRouter()
 
  return (
    <button onClick={() => router.push('/about')}>
      Click here to read more
    </button>
  )
}

Поверхностная маршрутизация

Поверхностная маршрутизация позволяет изменять URL, не выполняя повторно методы извлечения данных, что включает getServerSideProps, getStaticProps и getInitialProps.

Вы получите обновленный pathname и query через объект router (добавляемый useRouter или withRouter), не потеряв состояние.

Для включения поверхностной маршрутизации установите опцию shallow в значение true. Рассмотрим следующий пример:

import { useEffect } from 'react'
import { useRouter } from 'next/router'
 
// Current URL is '/'
function Page() {
  const router = useRouter()
 
  useEffect(() => {
    // Always do navigations after the first render
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])
 
  useEffect(() => {
    // The counter changed!
  }, [router.query.counter])
}
 
export default Page

URL будет обновлён до /?counter=10, и страница не будет перезамещена, а только изменится состояние маршрута.

Вы также можете отслеживать изменения URL с помощью componentDidUpdate, как показано ниже:

componentDidUpdate(prevProps) {
  const { pathname, query } = this.props.router
  // verify props have changed to avoid an infinite loop
  if (query.counter !== prevProps.router.query.counter) {
    // fetch data based on the new query
  }
}

Ограничения

Поверхностная маршрутизация только работает для изменений URL на текущей странице. Например, предположим, что у нас есть другая страница под названием pages/about.js, и вы выполнили это:

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

Поскольку это новая страница, она будет разгружать текущую страницу, загружать новую и ожидать извлечения данных, даже если мы запросили поверхностную маршрутизацию.

При использовании поверхностной маршрутизации со средством промежуточного программного обеспечения (middleware) она не будет гарантировать соответствие новой страницы текущей странице, как это было раньше без промежуточного программного обеспечения. Это происходит потому, что промежуточное программное обеспечение может динамически переписывать данные, и это нельзя проверить на стороне клиента без получения данных, что пропускается в поверхностном маршруте, поэтому изменение поверхностного маршрута всегда должно рассматриваться как поверхностное.