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

东营网站制作360seo

wzjs 2025/8/18 4:39:25

东营网站制作,360seo,电影网站html模板,芜湖先锋网站两学一做客户端组件路由钩子 useRouter, useParams, useSearchParams, usePathname,useRouter 返回一个包含6个操作浏览器nevigator对象的方法的对象 prefetch用于预获取某个路径的数据，可以改善首屏加载时间 useParams 返回动态路由参数 useSearchParams 返回动态路…

客户端组件路由钩子

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;