如何捕获 Next.js 中的所有路由？

在本文中，我们将学习如何在 NextJS 项目中捕获所有路由。 NextJS是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。动态路径的链接有助于有条件地渲染 NextJS 组件。路由定义了应用程序端点处理客户端请求的方式。

捕获所有路由：我们可以使用 catch-all 路由捕获 NextJs 中的所有路径。为此，我们必须在文件名的方括号内添加三个点，如下所示：

./pages/[...file_name].js

创建 NextJS 应用程序：您可以使用以下命令创建一个新的 NextJs 项目：

npx create-next-app gfg

创建项目文件夹（即 gfg）后，使用以下命令移动到该文件夹。

cd gfg

项目结构：它看起来像这样。

现在让我们创建一个新的动态路由来捕获所有路径。为此，我们将在 pages 目录中创建一个名为 […gfg].js 的新 javascript 文件。之后在该文件中添加以下内容。

文件名：/pages/[gfg].js

Javascript

// Importing useRouter() method
import { useRouter } from 'next/router'
  
function Gfg(){
  
  // Initializing useRouter() method
  const router = useRouter()
  
  return 
Path :- {router.asPath} 
}
  
export default Gfg;

说明：在上面的代码中，我们使用了 useRouter 钩子来访问路由器对象。 Router 对象包含有关当前路由的数据，例如路径名、查询、asPath 等。因此，首先，我们在文件中导入 useRouter，然后，我们创建一个新变量来存储路由器对象的值。然后我们将显示路由器对象的 asPath 属性的值。

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm run dev

输出：