乐闻世界logo
搜索文章和话题

NextJS 如何获取当前 pathname 和路由?

6 个月前提问
4 个月前修改
浏览次数323

1个答案

1

在Next.js中,可以通过多种方式获取当前的pathname和路由信息。一个常见的方式是使用Next.js的useRouter钩子。useRouter是一个React钩子,用于在页面组件中访问路由器对象。以下是获取pathname的例子:

javascript
import { useRouter } from 'next/router'; function MyComponent() { const router = useRouter(); console.log(router.pathname); // 当前页面的路径名 console.log(router.query); // 当前页面的查询参数 console.log(router.asPath); // 浏览器地址栏中显示的实际路径 // 其他业务逻辑... return ( <div> 当前路径是: {router.pathname} </div> ); }

在这个例子中,我们首先从next/router中导入了useRouter。之后在组件内部调用useRouter这个钩子,它会返回当前路由的router对象。这个对象包含了当前页面的路由信息,其中router.pathname就是当前页面的路径名。此外,router.query可以访问到URL的查询参数,而router.asPath则是浏览器地址栏中的实际路径,包括查询参数。

如果你正在编写一个服务端渲染(SSR)的页面或者是静态生成(SSG)的页面,并且需要在页面组件的getServerSidePropsgetStaticProps函数中获取路由信息,你可以使用context参数:

javascript
export async function getServerSideProps(context) { const { params, query, pathname } = context; // 使用 params, query, pathname 来获取路由信息 // 进行相应的数据获取或者处理 return { props: {}, // 会被传递给页面组件 }; } // 对于 getStaticProps,使用方式是类似的 export async function getStaticProps(context) { const { params, query, pathname } = context; // ...其他逻辑 return { props: {}, revalidate: 10, // 在这里指定重新验证的间隔(秒) }; }

在这里,context对象包含了paramsquerypathname等属性,它们分别表示动态路由参数、查询参数和路径名。这种方式主要用于数据获取的阶段,例如在页面渲染前从外部API获取数据。

总结来说,在客户端组件中使用useRouter钩子是获取当前路径名和路由的直接方式,而在getServerSidePropsgetStaticProps等数据获取方法中,则通过传递给这些函数的context参数来获取路由信息。

2024年6月29日 12:07 回复

你的答案