Las migas de pan son una herramienta de navegación del sitio web que permite a un usuario ver la "pila" de su página actual de cómo está anidada debajo de las páginas principales. Luego, los usuarios pueden regresar a una página principal haciendo clic en el enlace de ruta de navegación asociado. Estas   aumentan la experiencia del usuario de la aplicación, lo que facilita que los usuarios naveguen por páginas anidadas de manera eficiente y efectiva.  "migajas"  Las migas de pan son lo suficientemente populares como para que, si está creando un panel de control web o una aplicación, haya considerado agregarlas. Generar estos enlaces de migas de pan de manera eficiente y con el contexto apropiado es clave para una experiencia de usuario mejorada.      React que analice la ruta actual y construya una pantalla de migas de pan dinámicas que pueda manejar rutas estáticas y dinámicas de manera eficiente. Construyamos un componente inteligente NextBreadcrumbs  Mis proyectos generalmente giran en torno a   y   (anteriormente Material-UI), por lo que ese es el ángulo desde el que abordaré este problema, aunque la solución debería funcionar para   aplicación relacionada con Nextjs. Nextjs MUI cualquier  Migas de pan de ruta estática  Para empezar, nuestro componente   solo manejará rutas estáticas, lo que significa que nuestro proyecto solo tiene páginas estáticas definidas en el directorio de   . NextBreadcrumbs pages  Los siguientes son ejemplos de rutas estáticas porque no contienen   s y   s en los nombres de las rutas, lo que significa que la estructura del directorio se alinea 1:1 exactamente con las URL esperadas que sirven. [ ]    -->  pages/index.js /    -->  pages/about.js /about    -->  pages/my/super/nested/route.js /my/super/nested/route  La solución se ampliará para manejar rutas dinámicas más adelante.  Definición del componente básico  Podemos comenzar con el componente básico que utiliza el componente   de   como línea de base. Breadcrumbs MUI   import Breadcrumbs from '@mui/material/Breadcrumbs'; import * as React from 'react'; export default function NextBreadcrumbs() { return ( <Breadcrumbs aria-label="breadcrumb" /> ); }  Lo anterior crea la estructura básica del componente   React, importa las dependencias correctas y representa un componente MUI de   vacío. NextBreadcrumbs Breadcrumbs  Luego podemos agregar los   , que nos permitirán construir las migas de pan a partir de la ruta actual. next/router  También creamos un componente   que se usará para representar cada enlace. Este es un componente bastante tonto por ahora, excepto que mostrará texto normal en lugar de un enlace para la última ruta de navegación. Crumb  En una situación como   , se mostraría de la siguiente manera: /settings/notifications   Home (/ link) > Settings (/settings link) > Notifications (no link)  Esto se debe a que el usuario ya está en la última página de migas de pan, por lo que no es necesario vincular a la misma página. Todas las demás migajas se representan como enlaces en los que se puede hacer clic.   import Breadcrumbs from '@mui/material/Breadcrumbs'; import Link from '@mui/material/Link'; import Typography from '@mui/material/Typography'; import { useRouter } from 'next/router'; import React from 'react'; export default function NextBreadcrumbs() { // Gives us ability to load the current route details const router = useRouter(); return ( <Breadcrumbs aria-label="breadcrumb" /> ); } // Each individual "crumb" in the breadcrumbs list function Crumb({ text, href, last=false }) { // The last crumb is rendered as normal text since we are already on the page if (last) { return <Typography color="text.primary">{text}</Typography> } // All other crumbs will be rendered as links that can be visited return ( <Link underline="hover" color="inherit" href={href}> {text} </Link> ); }  Con este diseño, podemos volver a sumergirnos en el componente   para generar las migas de pan de la ruta.  NextBreadcrumbs Parte del código existente comenzará a omitirse para mantener las piezas de código más pequeñas. El ejemplo completo se muestra a continuación.  Generaremos una lista de objetos de migas de pan que contienen la información que cada elemento de   debe representar. Cada ruta de navegación se creará analizando la propiedad asPath     , que es una cadena que contiene la ruta como se muestra en la barra de URL del navegador. Crumb del enrutador asPath  Quitaremos todos los parámetros de consulta, como   , de la URL para que el proceso de creación de la ruta de navegación sea más sencillo. ?query=value   export default function NextBreadcrumbs() { // Gives us ability to load the current route details const router = useRouter(); function generateBreadcrumbs() { // Remove any query parameters, as those aren't included in breadcrumbs const asPathWithoutQuery = router.asPath.split("?")[0]; // Break down the path between "/"s, removing empty entities // Ex:"/my/nested/path" --> ["my", "nested", "path"] const asPathNestedRoutes = asPathWithoutQuery.split("/") .filter(v => v.length > 0); // Iterate over the list of nested route parts and build // a "crumb" object for each one. const crumblist = asPathParts.map((subpath, idx) => { // We can get the partial nested route for the crumb // by joining together the path parts up to this point. const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/"); // The title will just be the route string for now const title = subpath; return { href, text }; }) // Add in a default "Home" crumb for the top-level return [{ href: "/", text: "Home" }, ...crumblist]; } // Call the function to generate the breadcrumbs list const breadcrumbs = generateBreadcrumbs(); return ( <Breadcrumbs aria-label="breadcrumb" /> ); }  Con esta lista de migas de pan, ahora podemos renderizarlas usando los componentes   y   . Como se mencionó anteriormente, solo se muestra la parte de   de nuestro componente por razones de brevedad. Breadcrumbs Crumb return  // ...rest of NextBreadcrumbs component above... return ( {/* The old breadcrumb ending with '/>' was converted into this */} <Breadcrumbs aria-label="breadcrumb"> {/* Iterate through the crumbs, and render each individually. We "mark" the last crumb to not have a link. */} {breadcrumbs.map((crumb, idx) => ( <Crumb {...crumb} key={idx} last={idx === breadcrumbs.length - 1} /> ))} </Breadcrumbs> );  Esto debería comenzar a generar algunas migas de pan muy básicas, pero que funcionan, en nuestro sitio una vez renderizado;   se representaría como /user/settings/notifications   Home > user > settings > notifications  Memorización de migas de pan generadas  Sin embargo, hay una mejora rápida que podemos hacer antes de seguir adelante. En este momento, la lista de migas de pan se recrea cada vez que el componente se vuelve a renderizar, por lo que podemos   la lista de migas de una ruta determinada para ahorrar algo de rendimiento. Para lograr esto, podemos envolver nuestra llamada a la función   en el gancho   React. memorizar generateBreadcrumbs useMemo  const router = useRouter(); // this is the same "generateBreadcrumbs" function, but placed // inside a "useMemo" call that is dependent on "router.asPath" const breadcrumbs = React.useMemo(function generateBreadcrumbs() { const asPathWithoutQuery = router.asPath.split("?")[0]; const asPathNestedRoutes = asPathWithoutQuery.split("/") .filter(v => v.length > 0); const crumblist = asPathParts.map((subpath, idx) => { const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/"); return { href, text: subpath }; }) return [{ href: "/", text: "Home" }, ...crumblist]; }, [router.asPath]); return // ...rest below...  Mejora de la visualización del texto de la ruta de navegación  Antes de comenzar a incorporar rutas dinámicas, podemos limpiar más esta solución actual al incluir una forma agradable de cambiar el texto que se muestra para cada migaja generada.  En este momento, si tenemos una ruta como   , se mostrará: /user/settings/notifications   Home > user > settings > notifications  que no es muy atractivo. Podemos proporcionar una función al componente   que intentará generar un nombre más fácil de usar para cada uno de estos migas de ruta anidadas. NextBreadcrumbs   const _defaultGetDefaultTextGenerator= path => path export default function NextBreadcrumbs({ getDefaultTextGenerator=_defaultGetDefaultTextGenerator }) { const router = useRouter(); // Two things of importance: // 1. The addition of getDefaultTextGenerator in the useMemo dependency list // 2. getDefaultTextGenerator is now being used for building the text property const breadcrumbs = React.useMemo(function generateBreadcrumbs() { const asPathWithoutQuery = router.asPath.split("?")[0]; const asPathNestedRoutes = asPathWithoutQuery.split("/") .filter(v => v.length > 0); const crumblist = asPathParts.map((subpath, idx) => { const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/"); return { href, text: getDefaultTextGenerator(subpath, href) }; }) return [{ href: "/", text: "Home" }, ...crumblist]; }, [router.asPath, getDefaultTextGenerator]); return ( // ...rest below  y luego nuestro componente principal puede tener algo como lo siguiente, para titular las rutas secundarias, o tal vez incluso reemplazarlas con una nueva cadena.   {/* Assume that `titleize` is written and works appropriately */} <NextBreadcrumbs getDefaultTextGenerator={path => titleize(path)} />  Esta implementación daría como resultado las siguientes migas de pan. El ejemplo de código completo en la parte inferior tiene más ejemplos de esto.   Home > User > Settings > Notifications  Rutas dinámicas de Nextjs  El enrutador de Nextjs permite incluir   que usan   para permitir que las URL tengan slugs, UUID y otros valores dinámicos que luego se pasarán a sus vistas. rutas dinámicas Pattern Matching  Por ejemplo, si su aplicación Nextjs tiene un componente de página en   , entonces las rutas   y   coincidirán. pages/post/[post_id].js /post/1 /post/abc   Para nuestro componente de migas de pan, nos gustaría mostrar el nombre de la publicación asociada en lugar de solo su UUID. Esto significa que el componente deberá buscar dinámicamente los datos de la publicación en función de la ruta de la ruta URL anidada y regenerar el texto de la migaja asociada.  En este momento, si visita   , verá migas de pan que se ven como /post/abc   post > abc  pero si la publicación con UUID tiene el título   , entonces queremos cambiar las migas de pan para decir My First Post   post > My First Post  Profundicemos en cómo puede suceder eso usando funciones   . async  Enrutador Nextjs:   vs nombre de  asPath pathname  La instancia de enrutador   en nuestro código tiene dos propiedades útiles para nuestro componente   ;   y   de acceso. El enrutador   es la ruta URL como se muestra directamente en la barra de URL del navegador. El nombre de   es una versión más interna de la URL que tiene las partes dinámicas de la ruta reemplazadas con sus componentes   . next/router NextBreadcrumbs asPath pathname asPath pathname [parameter]  Por ejemplo, considere la ruta   de arriba. /post/abc  El   sería   como se muestra en la URL asPath /post/abc  El nombre de la   sería   como dicta nuestro directorio de  pathname /post/[post_id] pages  Podemos usar estas dos variantes de ruta de URL para crear una forma de obtener información dinámicamente sobre la ruta de navegación, de modo que podamos mostrar al usuario información más adecuada al contexto.  Están sucediendo muchas cosas a continuación, así que vuelva a leerlo, y las notas útiles a continuación, unas cuantas veces si es necesario.   const _defaultGetTextGenerator = (param, query) => null; const _defaultGetDefaultTextGenerator = path => path; // Pulled out the path part breakdown because its // going to be used by both `asPath` and `pathname` const generatePathParts = pathStr => { const pathWithoutQuery = pathStr.split("?")[0]; return pathWithoutQuery.split("/") .filter(v => v.length > 0); } export default function NextBreadcrumbs({ getTextGenerator=_defaultGetTextGenerator, getDefaultTextGenerator=_defaultGetDefaultTextGenerator }) { const router = useRouter(); const breadcrumbs = React.useMemo(function generateBreadcrumbs() { const asPathNestedRoutes = generatePathParts(router.asPath); const pathnameNestedRoutes = generatePathParts(router.pathname); const crumblist = asPathParts.map((subpath, idx) => { // Pull out and convert "[post_id]" into "post_id" const param = pathnameNestedRoutes[idx].replace("[", "").replace("]", ""); const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/"); return { href, textGenerator: getTextGenerator(param, router.query), text: getDefaultTextGenerator(subpath, href) }; }) return [{ href: "/", text: "Home" }, ...crumblist]; }, [router.asPath, router.pathname, router.query, getTextGenerator, getDefaultTextGenerator]); return ( // ...rest below  El desglose de   se movió a una función   ya que se usa la misma lógica para   y   . asPath generatePathParts router.asPath router.pathname  Determine el parámetro que se alinea con el valor de la ruta dinámica, de modo que      abc post_id param  El parámetro de ruta anidado y todos los valores de consulta asociados (   ) se pasan a un   proporcionado que devolverá un valor   o una respuesta   que debería devolver la cadena dinámica para usar en la ruta de   asociada. param getTextGenerator null Promise router.query  La matriz de dependencias   tiene más dependencias agregadas;   ,   y   . useMemo router.pathname router.query getTextGenerator  Finalmente, necesitamos actualizar el componente   para usar este valor de   si se proporciona para el objeto Crumb asociado. Crumb textGenerator   function Crumb({ text: defaultText, textGenerator, href, last=false }) { const [text, setText] = React.useState(defaultText); useEffect(async () => { // If `textGenerator` is nonexistent, then don't do anything if (!Boolean(textGenerator)) { return; } // Run the text generator and set the text again const finalText = await textGenerator(); setText(finalText); }, [textGenerator]); if (last) { return <Typography color="text.primary">{text}</Typography> } return ( <Link underline="hover" color="inherit" href={href}> {text} </Link> ); }  Las migas de pan ahora pueden manejar rutas estáticas y rutas dinámicas de forma limpia con el potencial de mostrar valores fáciles de usar. Si bien el código anterior es la lógica comercial del componente, todo esto se puede usar con un componente principal que se parece al ejemplo final a continuación.  Ejemplo completo   // NextBreadcrumbs.js const _defaultGetTextGenerator = (param, query) => null; const _defaultGetDefaultTextGenerator = path => path; // Pulled out the path part breakdown because its // going to be used by both `asPath` and `pathname` const generatePathParts = pathStr => { const pathWithoutQuery = pathStr.split("?")[0]; return pathWithoutQuery.split("/") .filter(v => v.length > 0); } export default function NextBreadcrumbs({ getTextGenerator=_defaultGetTextGenerator, getDefaultTextGenerator=_defaultGetDefaultTextGenerator }) { const router = useRouter(); const breadcrumbs = React.useMemo(function generateBreadcrumbs() { const asPathNestedRoutes = generatePathParts(router.asPath); const pathnameNestedRoutes = generatePathParts(router.pathname); const crumblist = asPathParts.map((subpath, idx) => { // Pull out and convert "[post_id]" into "post_id" const param = pathnameNestedRoutes[idx].replace("[", "").replace("]", ""); const href = "/" + asPathNestedRoutes.slice(0, idx + 1).join("/"); return { href, textGenerator: getTextGenerator(param, router.query), text: getDefaultTextGenerator(subpath, href) }; }) return [{ href: "/", text: "Home" }, ...crumblist]; }, [router.asPath, router.pathname, router.query, getTextGenerator, getDefaultTextGenerator]); return ( <Breadcrumbs aria-label="breadcrumb"> {breadcrumbs.map((crumb, idx) => ( <Crumb {...crumb} key={idx} last={idx === breadcrumbs.length - 1} /> ))} </Breadcrumbs> ); } function Crumb({ text: defaultText, textGenerator, href, last=false }) { const [text, setText] = React.useState(defaultText); useEffect(async () => { // If `textGenerator` is nonexistent, then don't do anything if (!Boolean(textGenerator)) { return; } // Run the text generator and set the text again const finalText = await textGenerator(); setText(finalText); }, [textGenerator]); if (last) { return <Typography color="text.primary">{text}</Typography> } return ( <Link underline="hover" color="inherit" href={href}> {text} </Link> ); }  y luego se puede ver un ejemplo del uso de   a continuación. Tenga en cuenta que   se usa para crear solo una referencia a cada función auxiliar, lo que evitará que se vuelvan a procesar innecesariamente las migas de pan cuando/si el componente de diseño de página se vuelve a procesar. También   mover esto al alcance de nivel superior del archivo, pero no me gusta contaminar el alcance global de esa manera. NextBreadcrumbs useCallback puede   // MyPage.js (Parent Component) import React from 'react'; import NextBreadcrumbs from "./NextBreadcrumbs"; function MyPageLayout() { // Either lookup a nice label for the subpath, or just titleize it const getDefaultTextGenerator = React.useCallback((subpath) => { return { "post": "Posts", "settings": "User Settings", }[subpath] || titleize(subpath); }, []) // Assuming `fetchAPI` loads data from the API and this will use the // parameter name to determine how to resolve the text. In the example, // we fetch the post from the API and return it's `title` property const getTextGenerator = React.useCallback((param, query) => { return { "post_id": () => await fetchAPI(`/posts/${query.post_id}/`).title, }[param]; }, []); return () { <div> {/* ...Whatever else... */} <NextBreadcrumbs getDefaultTextGenerator={getDefaultTextGenerator} getTextGenerator={getTextGenerator} /> {/* ...Whatever else... */} </div> } }  Esta es una de mis publicaciones más profundas y técnicas, así que espero que la hayas disfrutado, y por favor comenta o comunícate para que pueda garantizar la coherencia y la corrección. Con suerte, esta publicación le enseñó algunas estrategias o conceptos sobre Nextjs.  Si te gustó esta o   ,   para recibir actualizaciones tecnológicas semanales! mis otras publicaciones ¡suscríbete a mi nuevo boletín   Publicado por primera vez  aquí

Fetch

Super

2022 - HackerNoon Contributor of the Year - Css

2022 - HackerNoon Contributor of the Year - Html

Follow me on dev.to

Newsletter

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Html

Senior Software Engineer @Heroku

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Implementar una ruta de navegación dinámica en React/NextJS

Implementar una ruta de navegación dinámica en React/NextJS

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps