Next.js Capturar todas las rutas opcional

En este artículo, aprenderemos cómo podemos incluir rutas generales opcionales en nuestro proyecto NextJS.

NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac. La vinculación de rutas dinámicas ayuda a representar sus componentes NextJS de forma condicional.

Crear aplicación NextJS: puede crear un nuevo proyecto NextJs usando el siguiente comando:

npx create-next-app gfg

Después de crear la carpeta de su proyecto (es decir, gfg), muévase a ella usando el siguiente comando.

cd gfg

Estructura del proyecto: Se verá así.

Capturar todas las rutas opcionales : podemos hacer que las rutas capturadas sean opcionales en NextJs usando rutas capturadas opcionales. Para esto, tenemos que agregar tres puntos dentro de los corchetes dobles en el nombre del archivo. Por ejemplo:-

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

Ahora vamos a crear una nueva ruta dinámica para capturar opcionalmente todos los caminos. Para esto, vamos a crear un nuevo archivo javascript dentro de una nueva carpeta de ruta en nuestro directorio de páginas con el nombre [[…gfg]].js . Después de eso, agregue el siguiente contenido en ese archivo.

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

Aquí estamos usando el uso del enrutador para obtener el valor de la ruta actual y luego estamos mostrando el nombre de la ruta actual.

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm run dev

Producción:

¿En qué se diferencian las rutas catch-all de las rutas catch-all opcionales? En las rutas catch-all opcionales, la ruta sin el parámetro también obtendrá una coincidencia (en el ejemplo anterior, ‘/ruta’ también coincide), pero en las rutas catch-all, el la ruta sin el parámetro no coincidirá.

Vamos a cambiar el archivo de captura de todas las rutas opcional anterior [[.gfg]].js para capturar el archivo de todas las rutas […gfg].js con el siguiente contenido.

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

Ahora bien, esto no coincidirá con la ruta ‘/ruta’.

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm run dev

Producción: