Next.js 15 رفتار پیمایش: یک راهنمای جامع

import Link from 'next/link'

// Default behavior: scrolls to top
<Link href="/products">View Products</Link>

// Prevents scrolling to top
<Link href="/products" scroll={false}>View Products</Link>

import { useRouter } from 'next/navigation'

function FilterProducts() {
  const router = useRouter()

  const applyFilter = (filter) => {
    // Maintain scroll position when applying filters
    router.push(`/products?category=${filter}`, { scroll: false })
  }

  return (
    <button onClick={() => applyFilter('electronics')}>
      Filter by Electronics
    button>
  )
}

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

function InfiniteProductList() {
  const [page, setPage] = useState(1)
  const [products, setProducts] = useState([])
  const router = useRouter()

  const loadMore = async () => {
    const newPage = page + 1
    // Update URL to reflect new page without scrolling
    router.push(`/products?page=${newPage}`, { scroll: false })

    // Fetch more products
    const newProducts = await fetchProducts(newPage)
    setProducts([...products, ...newProducts])
    setPage(newPage)
  }

  // Intersection Observer to detect when user reaches bottom
  useEffect(() => {
    // Implementation details...
  }, [])

  return (
    <div>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
      <div ref={observerRef}>Loading more...div>
    div>
  )
}

function CheckoutProcess() {
  const router = useRouter()
  const [formData, setFormData] = useState({})

  const goToNextStep = (step) => {
    // Save current form data
    localStorage.setItem('checkout-data', JSON.stringify(formData))

    // Navigate to next step without scrolling to top
    router.push(`/checkout/step-${step}`, { scroll: false })
  }

  return (
    <form onSubmit={() => goToNextStep(2)}>
      {/* Form fields */}
      <button type="submit">Continue to Shippingbutton>
    form>
  )
}

import { useEffect, useRef } from 'react'
import { useSearchParams } from 'next/navigation'

function ProductPage() {
  const reviewsRef = useRef(null)
  const searchParams = useSearchParams()

  useEffect(() => {
    // Check if we should scroll to reviews section
    if (searchParams.get('section') === 'reviews' && reviewsRef.current) {
      reviewsRef.current.scrollIntoView({ 
        behavior: 'smooth',
        block: 'start'
      })
    }
  }, [searchParams])

  return (
    <div>
      <ProductDetails />
      <div ref={reviewsRef} id="reviews">
        <h2>Customer Reviewsh2>
        {/* Reviews content */}
      div>
    div>
  )
}

'use client'

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

export function ScrollRestorationManager() {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    // Save current scroll position for this route
    const saveScrollPosition = () => {
      const positions = JSON.parse(sessionStorage.getItem('scrollPositions') || '{}')
      positions[pathname + searchParams.toString()] = window.scrollY
      sessionStorage.setItem('scrollPositions', JSON.stringify(positions))
    }

    // Restore scroll position if available
    const restoreScrollPosition = () => {
      const positions = JSON.parse(sessionStorage.getItem('scrollPositions') || '{}')
      const savedPosition = positions[pathname + searchParams.toString()]

      if (savedPosition !== undefined) {
        window.scrollTo(0, savedPosition)
      }
    }

    // Add event listeners
    window.addEventListener('beforeunload', saveScrollPosition)
    restoreScrollPosition()

    return () => {
      window.removeEventListener('beforeunload', saveScrollPosition)
    }
  }, [pathname, searchParams])

  return null
}

// ServerComponent.jsx
export default function ProductList({ products }) {
  return (
    <div>
      {products.map(product => (
        <ProductItem key={product.id} product={product} />
      ))}
    div>
  )
}

// ClientWrapper.jsx
'use client'
import { useRouter } from 'next/navigation'
import ProductList from './ServerComponent'

export default function ProductListWrapper({ products }) {
  const router = useRouter()

  const handleProductFilter = (category) => {
    router.push(`/products?category=${category}`, { scroll: false })
  }

  return (
    <>
      <div className="filters">
        <button onClick={() => handleProductFilter('electronics')}>Electronicsbutton>
        <button onClick={() => handleProductFilter('clothing')}>Clothingbutton>
      div>
      <ProductList products={products} />
    >
  )
}

import { Suspense } from 'react'
import LoadingSpinner from '@/components/LoadingSpinner'
import ProductList from '@/components/ProductList'

export default function ProductsPage() {
  return (
    <div>
      <h1>Productsh1>
      <Suspense fallback={<LoadingSpinner />}>
        <ProductList />
      Suspense>
    div>
  )
}