useRouter, usePathname, useSearchParams

import { useRouter } from 'next/navigation'

router.push('/products?category=books')

router.replace('/products?sort=price')

import { usePathname } from 'next/navigation'

const pathname = usePathname()

/products/42?tab=reviews#comments

/products/42

'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'

export default function Navigation() {
  const pathname = usePathname()

  return (
    <nav>
      <Link
        href="/"
        aria-current={pathname === '/' ? 'page' : undefined}
      >
        Головна
      </Link>

      <Link
        href="/products"
        aria-current={pathname.startsWith('/products') ? 'page' : undefined}
      >
        Товари
      </Link>
    </nav>
  )
}

import { useSearchParams } from 'next/navigation'

const searchParams = useSearchParams()

/products?category=books&page=2

const category = searchParams.get('category')
const page = searchParams.get('page')

category === 'books'
page === '2'

searchParams.get('category')

searchParams.getAll('tag')

/products?tag=frontend&tag=nextjs

searchParams.has('page')

searchParams.toString()

category=books&page=2

import { Suspense } from 'react'
import ProductFilters from './ProductFilters'

export default function Page() {
  return (
    <main>
      <h1>Каталог товарів</h1>

      <Suspense fallback={<p>Завантаження фільтрів...</p>}>
        <ProductFilters />
      </Suspense>
    </main>
  )
}

'use client'

import { FormEvent, useEffect, useState } from 'react'
import {
  usePathname,
  useRouter,
  useSearchParams,
} from 'next/navigation'

const categories = ['all', 'books', 'electronics']

export default function ProductFilters() {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()

  const [query, setQuery] = useState('')

  useEffect(() => {
    setQuery(searchParams.get('q') ?? '')
  }, [searchParams])

  function createUrl(changes: Record<string, string | null>) {
    const params = new URLSearchParams(searchParams.toString())

    for (const [key, value] of Object.entries(changes)) {
      if (value) {
        params.set(key, value)
      } else {
        params.delete(key)
      }
    }

    const queryString = params.toString()

    return queryString ? `${pathname}?${queryString}` : pathname
  }

  function handleSearch(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()

    router.replace(
      createUrl({
        q: query.trim() || null,
        page: '1',
      }),
      { scroll: false },
    )
  }

  function handleCategoryChange(category: string) {
    router.replace(
      createUrl({
        category: category === 'all' ? null : category,
        page: '1',
      }),
      { scroll: false },
    )
  }

  const selectedCategory = searchParams.get('category') ?? 'all'

  return (
    <section>
      <form onSubmit={handleSearch}>
        <label htmlFor="search">Пошук</label>
        <input
          id="search"
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          placeholder="Назва товару"
        />
        <button type="submit">Знайти</button>
      </form>

      <div>
        <p>Категорія:</p>

        {categories.map((category) => (
          <button
            key={category}
            type="button"
            onClick={() => handleCategoryChange(category)}
            aria-pressed={selectedCategory === category}
          >
            {category}
          </button>
        ))}
      </div>

      <p>
        Поточний шлях: <strong>{pathname}</strong>
      </p>

      <p>
        Пошук: <strong>{searchParams.get('q') ?? 'не задано'}</strong>
      </p>
    </section>
  )
}

/?q=phone&page=1

/?q=phone&page=1&category=electronics

const params = new URLSearchParams()

params.set('q', 'next.js tutorial')
console.log(params.toString())
// q=next.js+tutorial

const unsafeUrl = `/search?q=${query}`

const params = new URLSearchParams()
params.set('q', query)

const safeUrl = `/search?${params.toString()}`

'use client'

import { useRouter } from 'next/navigation'

export default function CheckoutButton() {
  const router = useRouter()

  function handleCheckout() {
    router.push('/checkout')
  }

  return (
    <button type="button" onClick={handleCheckout}>
      Перейти до оформлення
    </button>
  )
}

router.back()

function handleClose() {
  if (window.history.length > 1) {
    router.back()
  } else {
    router.push('/')
  }
}

'use client'

import { useRouter } from 'next/navigation'

export default function RefreshButton() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.refresh()}>
      Оновити дані
    </button>
  )
}

import { Suspense } from 'react'
import Filters from './Filters'

export default function Page() {
  return (
    <Suspense fallback={<p>Завантаження...</p>}>
      <Filters />
    </Suspense>
  )
}

'use client'

import { useSearchParams } from 'next/navigation'

export default function Filters() {
  const searchParams = useSearchParams()

  return <p>{searchParams.get('q') ?? 'Без пошуку'}</p>
}

import {
  useRouter,
  usePathname,
  useSearchParams,
} from 'next/navigation'

import { usePathname } from 'next/navigation'

export default function Page() {
  const pathname = usePathname()

  return <p>{pathname}</p>
}

'use client'

import { usePathname } from 'next/navigation'

searchParams.set('page', '2')

const params = new URLSearchParams(searchParams.toString())
params.set('page', '2')

router.push(`${pathname}?${params.toString()}`)

router.push(`${pathname}?page=2`)

const params = new URLSearchParams(searchParams.toString())
params.set('page', '2')

router.push(`${pathname}?${params.toString()}`)

`${pathname}?${params.toString()}`

const queryString = params.toString()
const url = queryString ? `${pathname}?${queryString}` : pathname