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

在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）的页面，并且需要在页面组件的getServerSideProps或getStaticProps函数中获取路由信息，你可以使用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对象包含了params、query和pathname等属性，它们分别表示动态路由参数、查询参数和路径名。这种方式主要用于数据获取的阶段，例如在页面渲染前从外部API获取数据。

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