¿Alguna vez ha notado esos pequeños fragmentos de texto en algunos sitios web que indican su ubicación actual dentro del sitio? Se denominan migas de pan y pueden ser una forma útil de orientar a los usuarios, especialmente cuando navegan por sitios web complejos. Este artículo le mostrará cómo crear migas de pan en React.js.

¿Qué son las migas de pan y por qué son importantes?

Las migas de pan suelen ser pequeños fragmentos de texto que muestran la ubicación actual dentro de un sitio web. Pueden ser útiles para orientar a los usuarios, especialmente cuando navegan por sitios web que tienen varias páginas. Al proporcionar un rastro de enlaces, las migas de pan pueden ayudar a los usuarios a comprender dónde se encuentran dentro de un sitio web y permitirles navegar de regreso a las secciones anteriores fácilmente.

Es importante tener en cuenta que las migas de pan no deben utilizarse como medio principal de navegación en un sitio web. Más bien, deben usarse además de otros elementos de navegación, como un menú o una barra de búsqueda.

instagram viewer

Cómo crear migas de pan en React.js

Hay dos formas principales de crear migas de pan en React.js: usando el reaccionar-enrutador-dom biblioteca o mediante el use-react-router-migas de pan biblioteca. Pero antes de empezar, tienes que crear una aplicación React.

Método 1: mediante el uso de la biblioteca react-router-dom

Con la biblioteca react-router-dom, puede crear migas de pan manualmente para cada ruta en su aplicación React. La biblioteca proporciona una componente que se puede utilizar para crear migas de pan.

Para usar la biblioteca react-router-dom, primero debe instalarla usando npm:

npm instalar reaccionar-enrutador-dom

Una vez que se haya instalado la biblioteca, puede importarla a su componente React:

importar { Enlace } de 'reaccionar-enrutador-dom'

A continuación, puede utilizar el componente para crear migas de pan:

<Enlace a ="/">Hogar</Link>
<Enlace a ="/products">productos</Link>
<Enlace a ="/products/1">Producto 1</Link>

Ahora, puede agregar algo de estilo a las migas de pan y resaltar la página actual en la que se encuentra. Para eso, puedes usar el nombre de la clase apoyo de la componente. Para obtener el nombre de la ruta actual, puede usar el ubicación objeto de la biblioteca react-router-dom:

importar { Enlace, useUbicación } de 'reaccionar-enrutador-dom'
funciónMigas de pan() {
constante ubicación = usarUbicación();
devolver (
<navegación>
<Enlace a ="/"
 className={ubicación.ruta de acceso "/"? "migas de pan activas": "breadcrumb-no-activo"}
>
 Hogar
</Link>
<Enlace a ="/products"
 className={ubicación.pathname.startsWith("/products")? "migas de pan activas": "breadcrumb-no-activo"}
>
 productos
</Link>
<Enlace a ="/products/1"
 className={ubicación.ruta de acceso "/products/1"? "migas de pan activas": "breadcrumb-no-activo"}
>
 Producto 1
</Link>
</nav>
 );
}
exportarpor defecto Migas de pan;

Ahora, crea un nuevo archivo CSS y asígnale un nombre migas de pan.css. Agregue las siguientes reglas CSS al archivo:

.breadcrumb-not-active {
 color: #cccccc;
}
.breadcrumb-activo {
 color: #000000;
}
.breadcrumb-flecha {
 margen izquierdo: 10px;
 margen derecho: 10px;
}

Ahora, importe su archivo CSS a su componente React y agregue el flecha de pan rallado clase a tu componentes:

importar { Enlace, useUbicación } de 'reaccionar-enrutador-dom'
importar "./migas de pan.css";
funciónMigas de pan() {
constante ubicación = usarUbicación();
devolver (
<navegación>
<Enlace a ="/"
 className={ubicación.ruta de acceso "/"? "migas de pan activas": "breadcrumb-no-activo"}
>
 Hogar
</Link>
<abarcan className="flecha de pan rallado">&gt;</span>
<Enlace a ="/products"
 className={ubicación.pathname.startsWith("/products")? "migas de pan activas": "breadcrumb-no-activo"}
>
 productos
</Link>
<abarcan className="flecha de pan rallado">&gt;</span>
<Enlace a ="/products/1"
 className={ubicación.ruta de acceso "/products/1"? "migas de pan activas": "breadcrumb-no-activo"}
>
 Producto 1
</Link>
</nav>
 );
}
exportarpor defecto Migas de pan;

Hay diferentes tipos de ganchos en React. La biblioteca react-router-dom useUbicación hook te da acceso al objeto de ubicación, que tiene información sobre la ruta URL actual.

El La prop className del componente agrega una clase CSS a las migas de pan. La prop className toma una cadena o una matriz de cadenas. Si es una cadena, agregará la cadena como una sola clase al elemento. Si es una matriz de cadenas, cada cadena de la matriz se agregará como una clase separada.

El comienza con El método comprueba si la ruta actual comienza con "/ productos". Esto se debe a que la ruta de navegación de la página de productos debe estar activa no solo cuando la ruta es "/productos", sino también cuando la ruta es "/productos/1", "/productos/2", etc.

Método 2: mediante el uso de la biblioteca use-react-router-breadcrumbs

Otra forma de crear migas de pan en React es usando la biblioteca use-react-router-breadcrumbs. Esta biblioteca genera automáticamente migas de pan en función de las rutas definidas en su aplicación React.

Para usar esta biblioteca, primero deberá instalarla usando npm:

npm instalarusar-reaccionar-enrutador-migas de pan

Una vez que se haya instalado la biblioteca, puede importarla a su componente React:

importar utilizarBreadcrumbs de 'usar-reaccionar-enrutador-migas de pan'

A continuación, puede utilizar el utilizarBreadcrumbs gancho para crear migas de pan:

constante migas de pan = usar migas de pan();
consola.log (migas de pan);

Esto registrará una matriz de objetos de migas de pan en la consola. Cada objeto de ruta de navegación contiene información sobre la ruta, como el nombre, la ruta y los parámetros.

Ahora, puede representar sus migas de pan en la pantalla. Puedes usar el componente de la biblioteca de enrutador de reacción para crear sus migas de pan:

importar { Enlace } de 'reaccionar-enrutador-dom'
importar utilizarBreadcrumbs de 'usar-reaccionar-enrutador-migas de pan'
constante rutas = [
 { camino: '/users/:userId', pan rallado: 'Ejemplo 1' },
 { camino: '/data', pan rallado: 'Ejemplo 2' }
];
funciónMigas de pan() {
constante migas de pan = useBreadcrumbs (rutas);
consola.log (migas de pan)
devolver (
<navegación>
 {breadcrumbs.map(({ partido, miga de pan }) => (
<Clave de enlace={coincidencia.url} a={coincidencia.url}>
 {miga de pan} /
</Link>
 ))}
</nav>
 );
}
exportarpor defecto Migas de pan;

El componente Link se importa de la biblioteca react-router-dom. Utilizará este componente para crear enlaces a otras partes de la aplicación. Tú también puedes crear rutas protegidas utilizando el componente Enlace.

Se crea una matriz de objetos de ruta. Cada objeto de ruta contiene una ruta y una propiedad de ruta de navegación. La propiedad ruta corresponde a la ruta URL y la propiedad ruta de navegación corresponde al nombre de la ruta de navegación.

El utilizarBreadcrumbs gancho se utiliza para crear las migas de pan. Este enlace acepta una matriz de rutas como parámetro. Las rutas se utilizan para generar las migas de pan.

El método de mapa se utiliza para iterar sobre la matriz de migas de pan. Por cada pan rallado, un se crea el componente. El componente Enlace tiene un a prop, que corresponde a la ruta URL de la ruta de navegación. La miga de pan en sí misma se presenta como el contenido de la componente.

Ahora puede agregar algo de estilo a las migas de pan. Cree un nuevo archivo CSS y asígnele un nombre Breadcrumbs.css. Después de eso, agregue las siguientes reglas CSS al archivo:

.breadcrumb-not-active {
 color: #cccccc;
}
.breadcrumb-activo {
 color: #000000;
}

Ahora, puede importar el archivo CSS al componente React y agregar las clases de migas de pan al componentes:

importar { Enlace, useUbicación } de 'reaccionar-enrutador-dom'
importar utilizarBreadcrumbs de 'usar-reaccionar-enrutador-migas de pan'
importar "./Breadcrumbs.css";
constante rutas = [
 { camino: '/users/:userId', pan rallado: 'Ejemplo 1' },
 { camino: '/data', pan rallado: 'Ejemplo 2' }
];
funciónMigas de pan() {
constante migas de pan = useBreadcrumbs (rutas);
constante ubicación = usarUbicación()
devolver (
<navegación>
 {breadcrumbs.map(({ partido, miga de pan }) => (
<Enlace 
 clave={coincidencia.url} 
 to={coincidencia.url}
 className={match.pathname location.pathname? "migas de pan activas": "breadcrumb-no-activo"}
>
 {miga de pan} / 
</Link>
 ))}
</nav>
 );
}
exportarpor defecto Migas de pan;

Aumente la participación del usuario con migas de pan

Con las migas de pan, no solo puede ayudar a los usuarios a comprender dónde se encuentran dentro de su sitio web, sino que también puede aumentar la participación de los usuarios. Las migas de pan se pueden usar para mostrar el progreso del usuario a través de una tarea, como un proceso de registro o una compra. Al mostrar el progreso del usuario, puede alentarlo a completar la tarea.

También hay muchas otras cosas que debe tener en cuenta al diseñar un sitio web, como la usabilidad, la accesibilidad y la compatibilidad con dispositivos móviles. Sin embargo, si tiene en cuenta estas cosas, puede crear un sitio web que sea fácil de usar y atractivo.