当前位置：首页 > news >正文

next.js 组件路由钩子

news 2025/7/2 20:38:39

客户端组件路由钩子

useRouter,
useParams,
useSearchParams,
usePathname,

useRouter

返回一个包含6个操作浏览器nevigator对象的方法的对象
在这里插入图片描述
prefetch用于预获取某个路径的数据，可以改善首屏加载时间

useParams

返回动态路由参数

useSearchParams

返回动态路由查询字符串

usePathname

返回url字符串

完整调用示例

'use client';
import { 
    useRouter,
    useParams,
    useSearchParams,
    usePathname,
} from "next/navigation";
const PropertyPage = () => {
    const router = useRouter()
    const params = useParams()
    const searchParams = useSearchParams()
    const pathname = usePathname()

    return ( <div>
        <button 
            className="text-red-300"
            onClick={()=> router.replace('/')}
        >go home</button>
        <div> pathname {pathname}</div>
        <div> params {params.id}</div>
        <div> searchParams {searchParams.get('name')}</div>
    </div> );
}
 
export default PropertyPage;

效果展示

在这里插入图片描述
点击go home，调用replace方法，重定向道根路径

服务端的params和searchParams

13.3版本以前可以直接这样调用
在这里插入图片描述
新版本的官网解释是这样的

这里是说 以前依赖于运行时信息的同步动态 API 现在是异步的，也就是说param，seatchParams都是异步的，客户端没有报错但是也是异步的，但是服务端会报错，所以特别在这里提示，如果想要同步调用需要给他们都包上use()，想异步可以参考官网解释

import { use } from 'react'

const PropertyPage = ({params,searchParams}) => {
    const params1 =use(params);//这里包上
    const searchParams1 = use(searchParams); //包上
    return ( 
        <div>Property Page {params1.id} {searchParams1.name} </div>
     );
}
 
export default PropertyPage;