# data[].attributes.body
Objetivo: Comprender y aplicar el uso del hook useNavigate en React para la navegación programática.

# data[].attributes.body
Este hook nos devuelve la función navigate, que nos permite hacer redirecciones programáticas. Con esta función, podemos hacer lo mismo que con el componente navigate. Es decir, redirigir una URL al resultado de otra ruta. Si no conoces cómo funciona este componente, te invitamos a leer nuestro post sobre redirigir una ruta con React Router.

# data[].attributes.body
La diferencia entre el hook useNavigate y el componente navigate en React Router es que, con el uso del hook, podemos utilizar una función. Esto implica que podemos utilizarlo en cualquier parte del código.

# data[].attributes.body
<Link>:

Facilidad de uso: <Link> proporciona una forma simple y declarativa de establecer enlaces entre diferentes partes de tu aplicación React. Es intuitivo y fácil de implementar.

Optimización de rendimiento: <Link> está optimizado para la navegación en una aplicación React. Utiliza técnicas como la precarga (prefetching) para mejorar la velocidad de carga de las páginas vinculadas, lo que puede proporcionar una mejor experiencia al usuario.

Compatibilidad con accesibilidad: <Link> se integra bien con las herramientas de accesibilidad en React. Puedes establecer atributos aria para mejorar la experiencia de navegación para usuarios con discapacidad visual.

Integración con react-router: <Link> es parte de la librería react-router, lo que significa que se integra perfectamente con otras características y funcionalidades de enrutamiento proporcionadas por react-router.

Flexibilidad en la navegación programática: useNavigate te permite realizar la navegación de forma programática en respuesta a eventos o lógica compleja en tu aplicación. Esto proporciona una mayor flexibilidad en comparación con <Link>, que se enfoca en la navegación basada en eventos de usuario.

useNavigate:

Mayor control sobre el flujo de la aplicación: Con useNavigate, puedes controlar el flujo de navegación de manera más granular. Puedes decidir cuándo y cómo navegar, lo que es útil en escenarios donde necesitas validar datos o realizar acciones específicas antes de redirigir al usuario.

Compatibilidad con cualquier tipo de evento: A diferencia de <Link>, que se utiliza principalmente para enlaces de tipo <a> y <NavLink>, useNavigate puede ser utilizado con cualquier tipo de evento, como clics de botón, envíos de formularios, o incluso eventos personalizados.

# data[].attributes.body
Supongamos que tienes una aplicación con una pantalla de inicio (HomeScreen) y una pantalla de detalle (DetailScreen). Quieres navegar de la pantalla de inicio a la pantalla de detalle y viceversa.

# data[].attributes.body
<Link> :

Limitaciones en la navegación programática: <Link> está diseñado principalmente para la navegación mediante interacciones del usuario, como hacer clic en un enlace. Si necesitas realizar la navegación en respuesta a eventos o lógica compleja, puede resultar menos flexible que usar useNavigate u otras formas de navegación programática.

Complejidad en ciertos casos de uso avanzados: En casos de uso avanzados, como la navegación condicional o la manipulación de la historia del navegador, <Link> puede resultar menos flexible y puede requerir soluciones alternativas más complejas.

Posible sobrecarga de renderizado: Aunque <Link> está optimizado para el rendimiento, en aplicaciones muy grandes con muchos enlaces, puede haber una pequeña sobrecarga de renderizado debido al manejo interno de eventos y actualizaciones de estado.

useNavigate:

Más complejo de implementar: useNavigate requiere un poco más de configuración y entendimiento que <Link>, especialmente para desarrolladores que están menos familiarizados con los hooks en React o con el enrutamiento programático.

Posibilidad de errores en la manipulación de la historia del navegador: Al utilizar useNavigate para realizar cambios en la historia del navegador, existe un mayor riesgo de introducir errores o inconsistencias en el historial de navegación, especialmente en aplicaciones complejas.

Posible pérdida de las optimizaciones de rendimiento de <Link>: <Link> está optimizado para mejorar el rendimiento de la navegación al precargar recursos y minimizar las actualizaciones innecesarias de la interfaz de usuario. Al usar useNavigate, es posible que pierdas algunas de estas optimizaciones, lo que podría afectar ligeramente el rendimiento en aplicaciones grandes o complejas.

# data[].attributes.body
En el componente HomeScreen, se utiliza useNavigation para obtener el objeto de navegación.

Luego, se utiliza el objeto de navegación para navegar a la pantalla de detalles cuando se presiona el botón "Go to Details".

De manera similar, en el componente DetailScreen, se utiliza useNavigation para obtener el objeto de navegación.

Luego, se utiliza el objeto de navegación para navegar a la pantalla de inicio cuando se presiona el botón "Go to Home".

# data[].attributes.body
1. Casero, A. (2022, septiembre 21). Hooks en React Router. Recuperado el 30 de abril de 2024, de KeepCoding Bootcamps website: https://keepcoding.io/blog/hooks-en-react-router/

2. (N.d.). Reddit.com. Retrieved April 30, 2024, from https://www.reddit.com/r/reactjs/comments/vq2hb6/cu%C3%A1l_es_mejor_usar_link_o_usenavigate/es/

3. Wachira, G. (2023, septiembre 12). How to Use React Router V6: A Beginner’s Guide. Recuperado el 30 de abril de 2024, de MUO website: https://www.makeuseof.com/react-router-v6-how-use/

# data[].attributes.attachment_link.title
React Router 6 Tutorial #3 - Redirects & useNavigate

# data[].attributes.attachment_link.title
How to use useNavigate in React Router to redirect page

# data[].attributes.attachment_link.readable_text
¿Sabes qué son los hooks en React Router? React Router es una librería fundamental a la hora de diseñar la navegación de nuestras aplicaciones creadas con React. Gracias a esta librería, podemos crear una navegación dinámica. Es decir, una navegación que se modifica en el momento de ejecución de la aplicación y no antes del render. Además, React Router nos permite mantener la navegación a nivel del browser o del cliente, evitando las peticiones eternas al servidor.

En este post, te enseñaremos cuáles son los hooks en React Router, elementos fundamentales para utilizar esta librería al máximo.

¿Qué son los hooks?

Antes de hablarte sobre los hooks en React Router, consideramos importante darte una introducción a este concepto. Los hooks son un elemento que se introduce a React en su versión 16.8. Como puedes leer en el post Presentado hooks de Reactjs.org, estos elementos nos permiten usar el estado en React sin escribir una clase. Los hooks más conocidos en esta librería JavaScript son useState, que nos permite definir el valor inicial de un estado en React, y que nos permite crear efectos en React.

De manera general, los hooks son funciones JavaScript. Sin embargo, tienen dos diferencias importantes. La primera es que un hook solo se puede llamar en el nivel superior de nuestro código. La segunda es que, a pesar de que los hooks son funciones de JavaScript, no pueden usarse desde las líneas de código puras de JavaScript. Es decir, aunque podemos abrir una ventana a JavaScript en React, debemos usar los hooks solo en componentes puros de React.

¿Qué son los hooks en React Router?

Los hooks en React Router son el segundo elemento de sintaxis más importante de esta librería. Ya hemos visto en nuestro post sobre los componentes principales de React Router que esta librería pone a nuestra disposición cinco componentes que nos permiten crear rutas y enlaces, además de redirigir y anidar rutas. Además de estos componentes, React Router ha creado sus propios hooks a partir de los hooks de React, como useEffect y useState. A continuación, te detallamos cuáles son estos hooks en React Router.

Este hook envuelve un objeto de claves/valores con los parámetros dinámicos de la URL. Para conocer más sobre este hook, te recomendamos dirigirte a la página oficial de reactrouter, donde encontrarás un artículo sobre useParams.

Este hook devuelve el objeto location, que contiene información importante sobre la URL actual. Una de las funciones de este hook es decirnos cuál es la URL de la que venimos. Para conocer más sobre este hook y un ejemplo sobre cómo usarlo, te invitamos a leer nuestro post sobre el hook useLocation de React Router.

Este hook nos devuelve la función navigate,que nos permite hacer redirecciones programáticas. Con esta función, podemos hacer lo mismo que con el componente navigate.Es decir, redirigir una URL al resultado de otra ruta. Si no conoces cómo funciona este componente, te invitamos a leer nuestro post sobre redirigir una ruta con React Router.

La diferencia entre el hook useNavigate y el componente navigate en React Router es que, con el uso del hook,podemos utilizar una función. Esto implica que podemos utilizarlo en cualquier parte del código. El problema de utilizar componentes en vez de funciones es que debemos renderizarlos. Ya que una función no necesita este proceso de render, podemos insertarla donde queramos.

Este es un hook que nos permite trabajar con la query string de la URL. El hook useSearchParams nos devuelve una pareja con los searchParams en forma de URLSearchParams y una función para actualizarlos. Para conocer más sobre este hook, te recomendamos ir a la página oficial de React Router, donde encontrarás un post sobre useSearchParams. Ten presente que este artículo habla de la versión para la web de este hook.

¿Te animas a seguir aprendiendo?

Ahora que sabes qué son y cómo funcionan los hooks en React Router, seguro que quieres seguir aprendiendo sobre las posibilidades que esta y otras herramientas tienen para ti. Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un espacio intensivo en el que aprenderás a dominar herramientas y lenguajes de programación para la web como JavaScript, React, JSX, HTML y CSS. ¿Te animas a seguir aprendiendo con nosotros para triunfar en el sector IT? ¡Inscríbete ya y conviértete en un experto!

# data[].attributes.attachment_link.title
Hooks en React Router | KeepCoding Bootcamps

# data[].attributes.attachment_link.description
En este post, te enseñaremos cuáles son los hooks en React Router, elementos fundamentales para aprovechar esta librería al máximo.

# data[].attributes.attachment_link.readable_text
React Router is the most popular library you can use to implement routing in React applications. It provides a component-based approach to handling a variety of routing tasks, including page navigation, query parameters, and many more.

React Router V6 introduces some significant changes to the routing algorithm, to address pitfalls that were present in its earlier version, and provide an improved routing solution.

Getting Started With Routing Using React Router V6

To get started, create a React application. Alternatively, set up a React project using Vite. After creating the project, go ahead, and install the react-router-dom package.

npm install react-router-dom

Creating Routes Using React Router

To create routes, start by wrapping the entire application with a BrowserRouter component. Update the code in your index.jsx or main.jsx file as follows:

Wrapping the App component with the BrowserRouter component ensures that the entire application gets access to the routing context and features offered by the React Router library.

Using the Routes Component

Once you've wrapped the application with the BrowserRouter component, you can define your routes.

The Routes component is an improvement of the Switch component which was previously used by React Router v5. This component supports relative routing, automatic route ranking, and the ability to work with nested routes.

Typically, you'll add routes at the highest level of your application, often within the App component. However, you can define them at any other location, depending on your project's structure.

Open the App.jsx file and replace the boilerplate React code with the following:

This routing configuration maps specific URL paths to the corresponding page components (Dashboard and About), ensuring that the app renders the appropriate component when a user visits a particular URL.

Notice the element prop, within the Route component, which lets you pass a functional component as opposed to just the component's name. This makes it possible to pass props down the routes and their associated components.

In the src directory, create a new pages directory, and add two new files: Dashboard.jsx and About.jsx. Go ahead and define functional components within these files to test out the routes.

Using createBrowserRouter to Define Routes

React Router's documentation recommends using the createBrowserRouter component to define the routing configuration for React web applications. This component is a lightweight alternative to BrowserRouter which takes an array of routes as its argument.

By using this component, there's no need to define your routes within the App component. Instead, you can outline all your Route configurations within the index.jsx or main.jsx file.

Here's an example of how you can use this component:

The routing configuration uses the createBrowserRouter and RouterProvider components to create a routing system for a React application.

However, the only difference with this implementation is that, instead of wrapping the application using the BrowserRouter component, it uses the RouterProvider component to pass the Router context to all the components in the application.

Implementing Page-Not-Found Routes

The path prop in the Route component compares the provided path to the current URL to determine if there's a match before rendering the required component.

To handle cases where no routes match, you can create a specific route that will manage 404 page not found errors. Including this route ensures users can receive meaningful responses in situations where they have accessed a non-existent URL.

To implement a 404 route, add this route within the Routes component:

Then, create a custom NotFound.jsx component and finally, style the component using CSS modules.

The asterisk (*) is a wildcard character that handles scenarios where none of the specified routes match the current URL.

The useNavigate hook provides a programmatic way to handle navigation in applications. This hook is particularly useful when you want to trigger navigation in response to user interactions or events, such as button clicks or form submissions.

Let's take a look at how to use the useNavigate hook for programmatic navigation. Assuming you created the About.jsx functional component, import the hook from the React Router package:

Then add a button that, when clicked, triggers the navigation to a specified route.

It's worth mentioning that the useNavigate hook and useNavigation hook, introduced in React Router v6, serve distinct purposes despite their closely related names.

The useNavigation hook enables you to access details related to navigation, like the ongoing navigation state and other specifics. This is useful when you want to render UI elements such as loading spinners to provide visual feedback about ongoing processes.

Here's an example of how you can utilize the useNavigation hook.

In this example, the SubmitButton component will dynamically update its text based on the navigation state obtained from the useNavigation hook.

Even though these hooks have different roles, you can still use them together. The useNavigate hook to initiate the navigation process and useNavigation hook to retrieve real-time navigation details, which then guide the kind of feedback UI to render on the browser.

Using the useRoutes Hook

This hook lets you define the route paths alongside their corresponding components within an object. Subsequently, the hook is then used to match the routes and display the relevant components.

Here's a simple example of how to use the hook:

In this example, the routes object defines the mapping of URL paths to components. The App component then uses this hook to match the current URL and render the appropriate component based on the matched route.

Using this hook gives you granular control over your routing logic and allows you to easily create custom route-handling logic for your application.

Handling Routing in React Applications

Although React itself doesn't include a pre-built mechanism for handling routing tasks, React Router fills this gap. It provides various routing components and utility functions that you can easily use to create interactive, user-friendly applications.

# data[].attributes.attachment_link.title
How to Use React Router V6: A Beginner's Guide

# data[].attributes.attachment_link.description
Learn how to manage your URLs with the latest version of React Router.

# data[].attributes.body
En este enlace se muestra el código ya modificado

# data[].attributes.attachment_link.description
Contribute to LuisDeLaValie/demorouter development by creating an account on GitHub.

# data[].attributes.body
TECNOLÓGICO NACIONAL DE MÉXICO

INSTITUTO TECNOLÓGICO DE COLIMA

Ingeniería en Sistemas Computacionales

Periodo: Enero – Junio 2024

Materia: Aplicaciones Web Modernas

Actividad: Explorando el Uso de useNavigate en React

Docente: Patricia Elizabeth Figueroa Millan

Estudiantes:

Fátima Guadalupe García Ramirez-20460262

Angie Noemi Celestino Valencia-20460159

Luis Emilio Partida Contreras-18460120

Villa de Álvarez, Colima; 30 de Abril del 2024