Routing y navegación

Routing y navegación

El Routing consiste en mover paquetes o también se puede decir que sirve para mover información a nivel de una red de Internet desde una red a otra. Los paquetes viajan a través del internet y es a travéz del Routing que se logra. Sin este fundamento no sería posible. navegación es un módulo que te permitirá trabajar la navegación entre pantallas de tus aplicaciones desarrolladas para ellos deberemos implementar un router. Router es una colección de componentes de navegación que se componen declarativamente en nuestra aplicación. Ya sea que desee tener URLs marcables para su aplicación web o una forma composable de navegar en React Native.

Configuración de rutas en react

1.  Instalar react-router-dom para manejo del historial y navegación

npm install react-router-dom

1. Importamos react-router-dom en nuestro proyecto dentro de App.js

import { BrowserRouter, Router, Route, Switch, withRouter } from 'react-router-dom';

import { createBrowserHistory } from "history";

const historial = createBrowserHistory();

1. Creamos 3 Clase Componentes:

HomeContainer.js (ClassComponent)

PerfilContainer.js (ClassComponent)

ContactosContainer.js (ClassComponent)

LoginContainer.js (ClassComponent)

1. Los importamos

import HomeContainer from './components/containers/HomeContainer';

import PerfilContainer from './components/containers/PerfilContainer';

import ContactosContainer from './components/containers/ContactosContainer';

import LoginContainer from './components/containers/LoginContainer';

1. Funcionamiento de React Router Dom

Enviamos el historial constante como propiedad en la etiqueta <Router history={historial}/>de esta manera podemos tener acceso al historial de navegación del usuario en nuestra aplicación.

La etiqueta que la habíamos importado de react-router-dom y dentro de ella van a estar escritas nuestras rutas.

Comenzamos a escribir nuestras rutas. Donde path es la dirección que vamos a poner en el navegador y componente es el componente que va a cargr cuando vayamos a dicha ruta <Route path="/descrubrir" component={DescubrirPersonasContainer} />

1. Para poder navegar se puede hacer de dos maneras:

Por medio de la etiqueta Enlace <Link to='/perfil'></Link>

Por medio del historial onClick={() =>props.history.push('/perfil')}

Peticiones HTTP

El Protocolo de transferencia de hipertexto (en inglés, Hypertext Transfer Protocol, abreviado HTTP) es el protocolo de comunicación que permite las transferencias de información en la World Wide Web. HTTP fue desarrollado por el World Wide Web Consortium y la Internet Engineering Task Force, colaboración que culminó en 1999 con la publicación de una serie de RFC, siendo el más importante de ellos el RFC 2616 que especifica la versión 1.1. HTTP define la sintaxis y la semántica que utilizan los elementos de software de la arquitectura web (clientes, servidores, proxies) para comunicarse. HTTP es un protocolo sin estado, es decir, no guarda ninguna información sobre conexiones anteriores. El desarrollo de aplicaciones web necesita frecuentemente mantener estado. Para esto se usan las cookies, que es información que un servidor puede almacenar en el sistema cliente. Esto le permite a las aplicaciones web instituir la noción de sesión, y también permite rastrear usuarios ya que las cookies pueden guardarse en el cliente por tiempo indeterminado.

...