هشتگ (Hash tag) در Next.js

اضافه کردن و خواند هشتگ در Next.js در ورژن های 13 به بالا که زمانی که از App Router استفاده میشه کمی چالش برانگیز هست.
از روش زیر میشه این موضوع را مدیریت کرد.

میتونم یک هوک تعریف کنیم که قابل استفاده در تمام پروژه باشه و نتیجه هوک میشه هشتگ مورد نظر.

'use client'

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

const getHash = () =>
  typeof window !== 'undefined' ? .hash : ''

const useHash = () => {
  const [isClient, setIsClient] = useState(false)
  const [hash, setHash] = useState<string>(getHash())
  const params = useParams()

  useEffect(() => {
    setIsClient(true)
    setHash(getHash())
  }, [params])

  return isClient ? hash : ''
}

export default useHash

نحوه استفاده:

'use client'

import useHash from './useHash'

const HashDisplay = () => {
  const hash = useHash()

  return (
    <div>
      <h2>Current Hash:</h2>
      {hash ? (
        <p>{hash}</p>
      ) : (
        <p>No hash present in the URL</p>
      )}
    </div>
  )
}

export default HashDisplay