Antes de explicar que es router y apoyarme de algunos recursos que encontre en internet, me gustaria aterrizar en algo antes de iniciar el tema para comprender mejor este concepto de Router.
SPA
En resumen, una SPA carga todos los assets necesarios una sola vez para mostrar el sitio web, de esta forma, al navegar entre pantallas el navegador no se ve en la necesidad de recargar la pagina para mostrar esa "nueva pantalla" con su informacion e interfaz correspondiente. Las web tradicionales (por aquella epoca de los 2000) difieren mucho de las SPA.
Esto nos brinda una experiencia mas similar a si estuvieramos en una aplicacion de escritorio o movil.
De hecho, hay mucho por que hablar acerca de este tema. Pero seria muy extenso y fuera de contexto hablar de ese tema al 100% en esta entrada. (Dejo como referencia el siguiente enlace con muy buena informacion acerca de este tema)
Arquitectura de un SPA · Desarrollo de aplicaciones web. (NA). dev.to.
El punto de mencionar a las SPA es, si renderizan todos los assets de una sola vez, para no tener que hacer refresh del navegador.
Como sabe el navegador que pantallas e informacion mostrar si la aplicacion web cargo toda la informacion de golpe?
Bueno, a travez de las ruta url del navegador de internet.
Un sencillo ejemplo de esto es la nueva version de facebook. Cuando ingresas por la aplicacion web, el navegador carga una sola vez,y de ahi, no importa a donde navegues, la pagina nunca se refresca. Y, para diferenciar las distintas pantallas de la app, se utiliza la url. Para entrar a algun perfil por ejemplo
https://www.facebook.com/juanchitoperez/
Con esa direccion uno puede entrar directamente al perfil de Juan, sin tener que hacer la navegacion inicial para llegar hasta ahi.
Para poner un ejemplo practico, anexo este video que se pone manos a la obra con codigo para implementar rutas en un proyecto de React.
No esta de mas mencionar, que la direccion URL del navegador no solo sirve para indicarle a React que componentes mostrar en pantalla, si no que tambien sirve para obtener informacion de una API en formato JSON (nuestra base de datos).
Hay mucho de que hablar acerca de React Router, como se implementa, que parametros lleva esta libreria, etc.
Solo, por poner una demostracion corta.
1) Instalar la libreria
npm install react-router-dom
Una vez con la libreria (y un proyecto iniciado, aunque sea en blanco)
2) Se deben importar a la "App" todas las vistas del sistema. Junto con algunas funciones de la libreria que se descargo
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom'; //Es un hecho esta importacion
import Login from './components/auth/Login';
import NuevaCuenta from './components/auth/NuevaCuenta';
import Proyectos from './components/proyectos/Proyectos';
Una vez importadas todas las pantallas.
3) En la funcion de la App, dentro del return, se maneja una sintaxis y esquema como el siguiente
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Login}/>
<Route exact path="/nueva-cuenta" component={NuevaCuenta}/>
<Route exact path="/proyectos" component={Proyectos}/>
</Switch>
</Router>
);
}
De esa manera, al navegar entre cada url, se mostrara la pantalla correspondiente, asi como tambien la solicitud a la base de datos (si es que esta programada y configurada).
Hay mucho mas por hablar (acerca del codigo), por esa misma razon, recomiendo ver el video que anexe unos parrafos arriba, ya que todo se aprende mediante practica y un tanto de lectura.
En la documentacion hay mas informacion acerca de esto, incluso guias de como se utiliza, de forma muy detallada.
Con esta pequena lectura te llevas...
- Que es Router en React.js ?
Es practicamente una forma de "enrutar" los dominios y subdominios de la aplicacion web para indicarle a react que informacion y componentes traer al escuchar cierta direccion.
- Para que se utiliza Router?
En terminos simples, para "desmenusar" la aplicacion en diferentes pantallas/vistas. Por ejemplo, una pantalla de log in, una pantalla de registro, un panel exclusivo para usuarios autenticados, etc.
El resto, es practica con codigo ;)
Top comments (0)