In this article, we will learn how we can catch all routes in our NextJS project. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. The linking of dynamic paths helps in rendering your NextJS components conditionally. Routing defines the way in which the client requests are handled by the application endpoints.
Catch all routes: We can catch all paths in NextJs using catch-all routes. For this, we have to add three dots inside the square brackets in the name of the file as shown below:
./pages/[...file_name].js
Create NextJS Application: You can create a new NextJs project using the below command:
npx create-next-app gfg
After creating your project folder(i.e. gfg), move to it by using the following command.
cd gfg
Project Structure: It will look like this.
Now let’s create a new dynamic route to catch all the paths. For this, we are going to create a new javascript file inside our pages directory with the name […gfg].js. After that add the below content in that file.
Filename: /pages/[gfg].js
Javascript
// Importing useRouter() method import { useRouter } from 'next/router' function Gfg(){ // Initializing useRouter() method const router = useRouter() return <h1>Path :- {router.asPath} </h1> } export default Gfg; |
Explanation: In the above code, we are using the useRouter hook to access the router object. Router object contains the data about the current route such as pathname, query, asPath, etc. So first, we are importing useRouter in our file and after that, we are creating a new variable to store the value of the router object. Then we are displaying the value of the asPath property of the router object.
Step to Run Application: Run the application using the following command from the root directory of the project.
npm run dev
Output:
