useRouter

import { useRouter } from 'next/router'

function ActiveLink({ children, href }) {
  const router = useRouter()
  const style = {
    marginRight: 10,
    color: router.asPath === href ? 'red' : 'black',
  }

  const handleClick = (e) => {
    e.preventDefault()
    router.push(href)
  }

  return (
    <a href={href} onClick={handleClick} style={style}>
      {children}
    </a>
  )
}

export default ActiveLink

router.push(url, as, options)

import { useRouter } from 'next/router'

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

  return (
    <button type="button" onClick={() => router.push('/about')}>
      انقر هنا
    </button>
  )
}

import { useRouter } from 'next/router'

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

  return (
    <button type="button" onClick={() => router.push('/post/abc')}>
      انقر هنا
    </button>
  )
}

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// هنا يمكنك جلب وإعادة بيانات المستخدم
const useUser = () => ({ user: null, loading: false })

export default function Page() {
  const { user, loading } = useUser()
  const router = useRouter()

  useEffect(() => {
    if (!(user || loading)) {
      router.push('/login')
    }
  }, [user, loading])

  return <p>جاري التوجيه...</p>
}

import Link from 'next/link'
import { useState } from 'react'
import { useRouter } from 'next/router'

export default function Page(props) {
  const router = useRouter()
  const [count, setCount] = useState(0)
  return (
    <div>
      <h1>الصفحة: {router.query.slug}</h1>
      <p>العدد: {count}</p>
      <button onClick={() => setCount(count + 1)}>زيادة العدد</button>
      <Link href="/one">واحد</Link> <Link href="/two">اثنان</Link>
    </div>
  )
}

import { useRouter } from 'next/router'

export default function ReadMore({ post }) {
  const router = useRouter()

  return (
    <button
      type="button"
      onClick={() => {
        router.push({
          pathname: '/post/[pid]',
          query: { pid: post.id },
        })
      }}
    >
      انقر هنا لقراءة المزيد
    </button>
  )
}

router.replace(url, as, options)

import { useRouter } from 'next/router'

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

  return (
    <button type="button" onClick={() => router.replace('/home')}>
      انقر هنا
    </button>
  )
}

router.prefetch(url, as, options)

import { useCallback, useEffect } from 'react'
import { useRouter } from 'next/router'

export default function Login() {
  const router = useRouter()
  const handleSubmit = useCallback((e) => {
    e.preventDefault()

    fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        /* بيانات النموذج */
      }),
    }).then((res) => {
      // قم بالانتقال السريع من جانب العميل إلى صفحة لوحة التحكم التي تم جلبها مسبقًا
      if (res.ok) router.push('/dashboard')
    })
  }, [])

  useEffect(() => {
    // جلب صفحة لوحة التحكم مسبقًا
    router.prefetch('/dashboard')
  }, [router])

  return (
    <form onSubmit={handleSubmit}>
      {/* حقول النموذج */}
      <button type="submit">تسجيل الدخول</button>
    </form>
  )
}

router.beforePopState(cb)

import { useEffect } from 'react'
import { useRouter } from 'next/router'

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

  useEffect(() => {
    router.beforePopState(({ url, as, options }) => {
      // أريد فقط السماح بهذين المسارين!
      if (as !== '/' && as !== '/other') {
        // اجعل SSR يصيير المسارات السيئة كـ 404.
        window.location.href = as
        return false
      }

      return true
    })
  }, [router])

  return <p>مرحبًا بك في الصفحة</p>
}

import { useRouter } from 'next/router'

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

  return (
    <button type="button" onClick={() => router.back()}>
      انقر هنا للعودة
    </button>
  )
}

import { useRouter } from 'next/router'

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

  return (
    <button type="button" onClick={() => router.reload()}>
      انقر هنا لإعادة التحميل
    </button>
  )
}

import { useEffect } from 'react'
import { useRouter } from 'next/router'

export default function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url, { shallow }) => {
      console.log(
        `التطبيق يتغير إلى ${url} ${
          shallow ? 'مع' : 'بدون'
        } التوجيه السطحي`
      )
    }

    router.events.on('routeChangeStart', handleRouteChange)

    // إذا تم فك تركيب المكون، قم بإلغاء الاشتراك
    // من الحدث باستخدام طريقة 'off':
    return () => {
      router.events.off('routeChangeStart', handleRouteChange)
    }
  }, [router])

  return <Component {...pageProps} />
}

import { useEffect } from 'react'
import { useRouter } from 'next/router'

export default function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChangeError = (err, url) => {
      if (err.cancelled) {
        console.log(`تم إلغاء المسار إلى ${url}!`)
      }
    }

    router.events.on('routeChangeError', handleRouteChangeError)

    // إذا تم فك تركيب المكون، قم بإلغاء الاشتراك
    // من الحدث باستخدام طريقة 'off':
    return () => {
      router.events.off('routeChangeError', handleRouteChangeError)
    }
  }, [router])

  return <Component {...pageProps} />
}

import { useRouter } from 'next/router'
const MyComponent = () => {
  const { isReady, query } = useRouter()
  // ...
}

import { useEffect } from 'react'
import { useRouter } from 'next/compat/router'
import { useSearchParams } from 'next/navigation'
const MyComponent = () => {
  const router = useRouter() // قد يكون null أو مثيل NextRouter
  const searchParams = useSearchParams()
  useEffect(() => {
    if (router && !router.isReady) {
      return
    }
    // في `app/`، ستكون searchParams جاهزة فورًا بالقيم،
    // في `pages/` ستكون متاحة بعد أن يصبح المسار جاهزًا.
    const search = searchParams.get('search')
    // ...
  }, [router, searchParams])
  // ...
}

import { useSearchParams } from 'next/navigation'
const MyComponent = () => {
  const searchParams = useSearchParams()
  // نظرًا لأن هذا المكون يستخدم فقط في `app/`، يمكن إزالة مسار التوافق.
  const search = searchParams.get('search')
  // ...
}

import { renderToString } from 'react-dom/server'
import { useRouter } from 'next/compat/router'
const MyComponent = () => {
  const router = useRouter() // قد يكون null أو مثيل NextRouter
  // ...
}
export async function getServerSideProps() {
  const renderedComponent = renderToString(<MyComponent />)
  return {
    props: {
      renderedComponent,
    },
  }
}

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// هنا يمكنك جلب وإرجاع المستخدم
const useUser = () => ({ user: null, loading: false })

export default function Page() {
  const { user, loading } = useUser()
  const router = useRouter()

  useEffect(() => {
    // تعطيل التحقق على السطر التالي - هذا هو الحل الأكثر نظافة
    // eslint-disable-next-line no-floating-promises
    router.push('/login')

    // استخدام void مع الـ Promise الذي تُرجعها router.push
    if (!(user || loading)) {
      void router.push('/login')
    }
    // أو استخدام دالة async، انتظار الـ Promise باستخدام await، ثم استخدام void مع استدعاء الدالة
    async function handleRouteChange() {
      if (!(user || loading)) {
        await router.push('/login')
      }
    }
    void handleRouteChange()
  }, [user, loading])

  return <p>جاري التوجيه...</p>
}

import { withRouter } from 'next/router'

function Page({ router }) {
  return <p>{router.pathname}</p>
}

export default withRouter(Page)

import React from 'react'
import { withRouter, NextRouter } from 'next/router'

interface WithRouterProps {
  router: NextRouter
}

interface MyComponentProps extends WithRouterProps {}

class MyComponent extends React.Component<MyComponentProps> {
  render() {
    return <p>{this.props.router.pathname}</p>
  }
}

export default withRouter(MyComponent)