imber

Appearance

都只能在客户端组件使用

useParams ​

用于获取动态路由的路由段

alt text

jsx
'use client'

import { useParams } from 'next/navigation'

const Page = () => {
  const params = useParams<{ id: string }>()
  const { id } = params

  return <div>{id}</div>
}

export default Page
'use client'

import { useParams } from 'next/navigation'

const Page = () => {
  const params = useParams<{ id: string }>()
  const { id } = params

  return <div>{id}</div>
}

export default Page

usePathname ​

用于获取 URL 的路径名

alt text

如 http://localhost:3000/photo/1 返回 /photo/1

jsx
'use client'

import { usePathname } from 'next/navigation'

const Page = () => {
  const pathname = usePathname()

  return <div>{pathname}</div>
}

export default Page
'use client'

import { usePathname } from 'next/navigation'

const Page = () => {
  const pathname = usePathname()

  return <div>{pathname}</div>
}

export default Page

useRouter ​

编程式路由，可以用router.prefetch(href: string)实现和 Link 一样的预取功能，但是尽量用 Link，因为 Link 渲染 a 标签更好

js
'use client'

import { useRouter } from 'next/navigation'

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

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}
'use client'

import { useRouter } from 'next/navigation'

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

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

useSearchParams ​

注意：页面中使用 useSearchParams 必须要用 Suspense 包起来

用于读取当前 URL 的查询字符串

js
'use client'

import { useSearchParams } from 'next/navigation'

const Page = () => {
  const searchParams = useSearchParams()

  const id = searchParams.get('id')

  return <div>{id}</div>
}

export default Page
'use client'

import { useSearchParams } from 'next/navigation'

const Page = () => {
  const searchParams = useSearchParams()

  const id = searchParams.get('id')

  return <div>{id}</div>
}

export default Page

也可以这样获取 searchParams : export default function Page({ searchParams }): JSX.Element

思考 ​

如何在服务端组件中获取页面路径？