Estoy muy emocionado de compartir con ustedes algunas   hoy. React Router es una herramienta increíble que nos permite crear una navegación dinámica y fluida en nuestras aplicaciones   . técnicas avanzadas de React Router React  Si bien se usa comúnmente para las necesidades básicas de enrutamiento, existen algunas técnicas menos conocidas que pueden elevar sus capacidades de enrutamiento a un nivel completamente nuevo.  Hoy compartiré algunos de mis favoritos que he descubierto con el tiempo.  Cubriremos:  Manejo de la notoria página 404.  Creación de un indicador de página activa para resaltar la ruta actual.  Utilizando ganchos   y   . useNavigate useLocation  Cuando termine de leer este artículo, tendrá una gran comprensión de estas técnicas avanzadas de React Router y se sentirá seguro al aplicarlas en sus propios proyectos.  Entonces, ¡vamos a sumergirnos y mejorar juntos nuestras habilidades de enrutamiento!  ¿Estás listo? ¡Empecemos!  Tratar con una página 404   Cuando se trabaja en proyectos más grandes, es esencial cuidar las rutas que no se pueden encontrar. A menudo nos referimos a estas rutas como   porque devuelven el   404 cuando no se encuentra un documento en el servidor. rutas 404 código de estado HTTP  Por cierto, si eres un amante de los gatos, quizás disfrutes visitando   . http.cat  Ahora, profundicemos en la creación de una ruta especial que se activará cuando ninguna de las otras rutas coincida con la URL actual en el navegador.   import {BrowserRouter, Routes, Route} from "react-router-dom"; function App() { return <BrowserRouter> <Routes> <Route path="/" element={<p>Landing page</p>}></Route> <Route path="/products" element={<p>Products page</p>}></Route> <Route path="*" element={<p>404 page</p>}></Route> </Routes> </BrowserRouter> }  Al acceder a la página principal   , los usuarios serán dirigidos a la página de destino. Navegar a la página   los llevará a la página de Productos. Sin embargo, si se accede a otros enlaces que no corresponden a una ruta específica, se mostrará la página 404. / /products  El motivo de este comportamiento es la implementación de una   especializada para la página 404, donde la propiedad de la ruta se establece en   . Esta configuración garantiza que React Router utilizará exclusivamente esta ruta cuando no se puedan combinar otras rutas. La ubicación específica de la Ruta 404 es intrascendente y se puede colocar en cualquier lugar dentro de la sección   , como un componente integral de la misma. <Route> * <Routes>...</Routes>  página activa  Otra forma en que las aplicaciones pueden hacer uso de las rutas de manera práctica es resaltando la página actualmente activa en el menú.  Imaginemos que tiene un menú de navegación con dos enlaces:  Inicio - Este enlace lleva al usuario a la página principal   . /  Acerca de: este enlace lleva al usuario a la página Acerca   . /about  Con React Router, es posible resaltar automáticamente el enlace   de cuando el usuario está en la ruta   . Del mismo modo, puede resaltar el enlace Inicio cuando el usuario está en la ruta   . La mejor parte es que puedes lograr esto sin la necesidad de condicionales complejos. About /about /  Aquí hay una manera simple de hacer que funcione:   import {NavLink} from "react-router-dom"; function getClassName({isActive}) { if (isActive) { return "active"; // CSS class } } function App() { return <ul> <li> <NavLink to="/" className={getClassName}>Home</NavLink> </li> <li> <NavLink to="/about" className={getClassName}>About</NavLink> </li> </ul> }  El código que ve arriba necesita algo de CSS para que la clase   funcione. Por lo tanto, podemos mejorarlo haciendo que el enlace del menú de la página actualmente activa aparezca en negrita y se destaque. active   .active { font-weight: bold; }  El atributo   del elemento   tiene la flexibilidad de aceptar una función en lugar de solo una cadena. Cuando decida usar una función, se le dará un objeto como parámetro, y este objeto tendrá la propiedad   ya configurada. Para acceder fácilmente a esta propiedad dentro de la función, usamos la desestructuración al incluir   en el parámetro. className NavLink isActive {isActive}  A continuación, procedemos a verificar si   tiene un valor verdadero. Si ese es el caso, devolveremos el nombre de la clase     . isActive CSS active  Cuando la ruta actual en React Router coincide con el atributo   del componente   , la función   se evaluará como un valor booleano. to NavLink isActive  Como resultado, React Router incluirá sin problemas la clase   en el elemento   correspondiente, indicándolo como la ruta actualmente activa. active <NavLink />  Versión más corta  Si prefiere un enfoque más corto, puede usar el operador ternario para refactorizar el código mencionado anteriormente. Este operador proporciona una forma de reemplazar una declaración if/else usando el formato: ¿   . condition ? truthy expression : falsy expression  Realmente no uso mucho el operador ternario porque a menudo puede hacer que el código sea menos legible. Sin embargo, es aceptable usarlo en este caso.  Considere lo siguiente como un ejemplo:   function getClassName({isActive}) { if (isActive) { return "active"; } else { return ""; } }  Puede sustituir el código anterior con el siguiente enfoque:   function getClassName({isActive}) { return isActive ? "active" : ""; }  Simplemente debe asegurarse de que la declaración de devolución se coloque fuera del operador ternario. Cuando la condición   es verdadera, la expresión después de   se ejecutará   . De lo contrario, la expresión después de   se ejecutará   . isActive ? "active" : ""  Ahora, podemos eliminar la necesidad de una definición de función separada llamada   . En su lugar, podemos usar una función de flecha como esta:   . getClassName ({isActive}) => isActive ? "active" : ""  Si encuentra este cambio demasiado difícil de leer, puede continuar usando una función separada como antes.  El código final se vería así:   import {NavLink} from "react-router-dom"; function App() { return <ul> <li> <NavLink to="/" className={({isActive}) => isActive ? "active" : ""}>Home</NavLink> </li> <li> <NavLink to="/about" className={({isActive}) => isActive ? "active" : ""}>About</NavLink> </li> </ul> }  Oh chico, ¡prácticamente puedo escuchar tus pensamientos!  Sojin, has ido y roto el principio SECO, ¿no es así?  Este es solo un ejemplo. No hay necesidad de ponerse nervioso 😀  Elegir entre Link y NavLink: ¿Qué los distingue?  Es posible que ya haya notado que estoy usando   en lugar de nuestro amigo habitual,   . Pero no te preocupes, déjame explicarte por qué. Verá, el componente   no le permite usar una definición de función para la propiedad   . Sí, puede ser sorprendente, pero así es cuando trabajas con   . NavLink Link <Link /> className <Link />  Un error común que he visto es que los desarrolladores junior de React intentan usar definiciones de función en la propiedad   de un componente   , que simplemente no funciona. className <Link />  Si te interesa, puedo escribir un artículo sobre este tema. ¡Solo házmelo saber en los comentarios!   usarNavegar  En determinadas circunstancias, es posible que deba reubicar páginas mediante programación dentro de su aplicación React. Por ejemplo, para redirigir al visitante a una página específica, puede enviar una solicitud y esperar la respuesta.  Aquí están algunos ejemplos:  Si el usuario no ha iniciado sesión, envíelo a la página de inicio de sesión.  Después de que la solicitud getLogin se haya completado con éxito, redirija al usuario a   . /dashboard  Esto requiere el uso del gancho   , que devuelve una función que puede usar para redirigir al usuario mediante programación a una nueva ruta. useNavigate()  Echar un vistazo:   import React, {useEffect} from "react"; import {useNavigate} from "react-router-dom"; function HelpPage() { const navigate = useNavigate(); useEffect(() => { const isLoggedIn = window.localStorage.getItem("isLoggedIn"); if (!isLoggedIn) { navigate("/login"); } }, []); return <h2>Help page</h2>; }  ¡Usar BrowserRouter es esencial!  En este ejemplo, estamos comprobando si localStorage tiene un valor asignado a la clave   . Si no es así, redirigiremos al usuario a la página   mediante la función   . isLoggedIn /login navigate("/login")  Para que funcione, solo recuerde usar el gancho   dentro de un componente que está anidado dentro del componente   . De lo contrario, no funcionará correctamente. useNavigate() <BrowserRouter />  Por ejemplo, el siguiente ejemplo no funcionará:   import React from "react"; import {BrowserRouter, useNavigate} from "react-router-dom"; function App() { // ❌ This breaks because the component was not wrapped by BrowserRouter, but its children are. const history = useNavigate(); return <BrowserRouter> {/* ... */} </BrowserRouter>; }  Si está tratando de usar el gancho   dentro del componente   , es posible que tenga un pequeño contratiempo. Eso es porque no funcionará a menos que envuelva el componente   con   . useNavigate() App() App() <BrowserRouter />  ¡Pero no te preocupes!  La buena noticia es que todos los componentes secundarios dentro de la aplicación serán envueltos automáticamente por   , por lo que puede usar felizmente   en esos componentes secundarios sin ningún problema. <BrowserRouter /> useNavigate()  Sin embargo, si realmente necesita usar   en el propio componente   , hay una solución simple. Solo necesita crear un componente principal que envuelva   y asegúrese de mover el   dentro de ese componente principal. Una vez que hagas eso, estarás listo y podrás usar   en el componente   para el contenido de tu corazón 💗 useNavigate() <App /> <App /> <BrowserRouter /> useNavigate() <App />  Garantizar la accesibilidad y el uso adecuado de enlaces  Cuando se trata de hacer que su sitio web sea accesible, es importante prestar atención a cómo están estructurados sus enlaces. Para garantizar eso, se recomienda usar elementos   en lugar de otros métodos. <Link />  ¿Por qué?  Bueno, estos elementos se representarán automáticamente como etiquetas   , que son conocidas por sus   . <a> características de accesibilidad  Ahora, aquí hay un consejo amistoso: evite reemplazar sus elementos   normales con el método   proporcionado por   . Este método solo debe utilizarse en los casos en que no sea posible utilizar un elemento   . <Link /> .push() useNavigate() <Link />  ¿Cuándo sucede eso?  Por lo general, es cuando necesita redirigir a los usuarios mediante programación en función de cierta lógica, como el resultado de una operación   . fetch()   useUbicación  ¿Qué sucede si desea ejecutar un fragmento de código cada vez que React Router lo lleva a una nueva dirección?  Puede lograrlo fácilmente con la ayuda del enlace   . Pero antes de profundizar en los detalles, exploremos algunos escenarios en los que esto puede resultar útil. Uno de los casos de uso más comunes es enviar un evento   a su servicio de análisis, como Google Analytics. useLocation de vista de página  Sin embargo, vale la pena mencionar que Google Analytics 4 ahora se encarga de esto automáticamente, por lo que no necesariamente tiene que implementarlo usted mismo.  Sin embargo, aprender sobre el enlace   sigue siendo valioso, ya que puede encontrar otros propósitos para él. Por ejemplo, puede usarlo para integrarse con otras bibliotecas y servicios de análisis, o para ejecutar acciones específicas basadas en las rutas visitadas. useLocation  ¡Las posibilidades son infinitas!  gancho useLocation  El enlace   es muy útil porque le brinda información sobre la ruta que se está utilizando actualmente. useLocation  Aquí hay una guía amigable sobre cómo usar el enlace useLocation:   import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom"; import {createRoot} from "react-dom/client"; function App() { const location = useLocation(); console.log(location.pathname); return <Routes> {/* routes here... */} </Routes> } createRoot(document.querySelector("#react-root")).render(<BrowserRouter><App /></BrowserRouter>);  Ahora, puede acceder a la información de la ruta a través de la variable de ubicación. Es un objeto que contiene el   actual. pathname  Para averiguar qué ruta está navegando el usuario actualmente, simplemente use   . Le dará algo como   ,   , o cualquier otra ruta que haya configurado. location.pathname / /about  Recuerde, al igual que con el enlace   , es importante que su código se ejecute dentro de un componente que está envuelto por   . De lo contrario, el enlace   no hará su magia. useNavigate <BrowserRouter /> useLocation  Responder a los cambios de ubicación  Cuando la ubicación cambia, puede utilizar el enlace   para acceder a la ruta URL actual en React Router. Al envolver su código con un enlace   y establecer la dependencia en   , puede ejecutar una pieza específica de código siempre que haya una navegación a una nueva URL. useLocation useEffect location  Aquí hay un ejemplo de cómo hacerlo:   import React, {useEffect} from "react"; import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom"; import {createRoot} from "react-dom/client"; function App() { const location = useLocation(); // run a piece of code on location change useEffect(() => { console.log(location.pathname); // send it to analytic, or do some conditional logic here }, [location]); return <Routes> {/* routes here... */} </Routes> } createRoot(document.querySelector("#react-root")).render(<BrowserRouter><App /></BrowserRouter>);  Cada vez que el usuario se mueve a una nueva ruta durante la navegación, el código dentro del enlace   se ejecutará y hará lo suyo. Es básicamente una forma de asegurarse de que se ejecute un código específico siempre que haya un cambio en el objeto de ubicación. useEffect  Buen trabajo, ahora eres un experto en React Router 🥳  Para concluir, este artículo le ha brindado una comprensión más profunda de React Router. Si bien es posible que no use todas las funciones discutidas aquí. Aún así, es fantástico que estés al tanto de ellos. Si alguna vez necesita incorporar una funcionalidad similar en el futuro, sabe exactamente dónde buscar. Por lo tanto, asegúrese de guardar o marcar esta publicación para una fácil referencia. Y recuerde, si tiene alguna pregunta o necesita más ayuda, no dude en comunicarse conmigo en Twitter. ¡Estoy aqui para ayudar!

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Técnicas avanzadas de React Router V6: ir más allá de lo básico

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

¿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

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

¿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

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps