Una vez hemos creado las distintas páginas de nuestra aplicación, estén o no estilizadas, es una buena idea empezar a pensar en cómo el usuario explorará nuestro proyecto. A esta exploración la llamamos navegación y se refiere a las distintas rutas por las que un usuario pasa de página en página. En este post, te enseñaremos la diferencia entre la navegación estática y navegación dinámica para que decidas cuál aplicar en tus proyectos.
Como has podido leer en nuestros posts sobre qué es React Router y para qué sirve la librería React Router, un paso fundamental en el desarrollo de una aplicación es declarar rutas de navegación. Existen dos maneras de declarar estas rutas conocidas como navegación estática y navegación dinámica.
Puede que hayas visto en cursos de programación backend que, en el proceso de desarrollar proyectos, podemos ir declarando una serie de rutas de exploración de nuestra aplicación. Dentro de nuestro código, a cada una le asignamos una función administradora, también conocida como controlador. De esta manera, cuando vamos diseñando nuestra API, podemos definir qué código ejecutar cuándo se recibe una llamada a determinado endpoint. Este modo de declarar y estructurar rutas, muy usadas en proyectos exprés, es una navegación estática. ¿Por qué?
La diferencia entre navegación estática y navegación dinámica se basa principalmente en el momento en que se declaran las rutas. Cuando definimos las rutas al diseñar nuestra API, estamos declarando las rutas en la inicialización. Es decir, se declaran un determinado número de rutas antes de ejecutar cualquier renderizado. Esta manera de declarar rutas se llama estática porque se ha definido un número determinado. En este sentido, se vuelve complejo cambiar el número de rutas en el tiempo de ejecución.
La librería React Router nos propone usar el otro método de declaración de rutas: la navegación dinámica. Al comparar los conceptos de navegación estática y navegación dinámica veremos que, en este último método, el routing sucede mientras la aplicación se renderiza, no antes.
Puede que esto suene confuso, pues React Router nos permite asociar componentes con rutas de una forma estática dentro de nuestro código. Sin embargo, React Router nos permite usar la navegación estática y navegación dinámica a la vez. Por ello, en cualquier punto de nuestra aplicación vamos a poder crear subrutas, enlaces y redirigir nuestras rutas. Es decir, no estaremos tan atados a lo que hemos definido en un principio.
Entonces, podemos decir que el routing o declaración de rutas con React Router sucede mientras la aplicación se renderiza. Esto se debe a que en React Router básicamente todo son componentes React. Estos componentes nos permiten modificar con facilidad las rutas en el proceso de renderizado.
A continuación, te presentamos de manera resumida los componentes principales de React Router y sus funciones:
- BrowserRouter: este componente envuelve toda la aplicación. Para ello, usa history API. Puedes conocer más sobre este API en el post de la MDN titulado Manipulando el historial del navegador.
- Link, NavLink: este componente nos permite crear enlaces para navegación declarativa.
- Route: renderiza un componente cuando hace match con la URL. Si no encuentra este match, el componente Route renderiza null.
- Switch: renderiza el primer <Route/> que hace match.
Si quieres conocer más en profundidad qué es y cómo funciona cada uno de estos componentes, te invitamos a leer nuestro post sobre componentes principales de React Router. Además, en nuestro blog puedes leer otros artículos sobre esta librería. como aplicar React Router a una aplicación React y declarar rutas con React Router.
También te sugerimos leer la documentación oficial de React Router en reactrouter.com.
¿Quieres seguir aprendiendo?
Después de leer este post, ya sabes cuál es la diferencia entre navegación estática y navegación dinámica y cómo aplicarlas en tus proyectos de programación en React. Sin embargo, todavía queda mucho por aprender para dominar el mundo del desarrollo web. Por ello, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, un programa intensivo donde aprenderás a desarrollar con lenguajes de programación como JavaScript, HTML y CSS. ¿Quieres seguir aprendiendo con nosotros? ¡Matricúlate ahora!
