Direccionamiento en React con React router: crear plantillas con outlet

Uno de los temas más importantes al trabajar con React es el redireccionamiento y sin duda la mejor librería es React Router. Ya que es posible que contemos con varios enlaces en una misma página, necesitamos crear un único archivo que controle este direccionamiento o enrutamiento y para este trabajo React Router Dom es el mejor.

Antes de iniciar, comparto contigo los enlaces importantes mencionados en el video y también fuentes de información por si quieres revisar adicionalmente:

• Repositorio: Haz click aquí para ver el repositorio de direccionamiento con react router.
• React router: Haz click aquí para ver la documentación de react router.
• Outlet: Haz click aquí para ver la documentación de outlet.

Crear Direccionamiento.jsx

El primer paso para poder crear un enrutamiento correcto en react es entender cómo crear una ruta simple, pero para esto primero instalamos dentro de nuestro aplicativo react:

npm i react-router-dom

Una vez instalado, podemos proceder a crear nuestro archivo de direccionamiento. Para esto primero vamos a crear un archivo jsx llamado direccionamiento.jsx, y luego lo vamos a importar dentro de nuestro app.js, así:

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import Direccionamiento from "./Direccionamiento";


function App (){
    return <Router>
         <div>
            <Direccionamiento />
        </div>
    </Router>
}

export default App;

Una vez modificado nuestro aplicación de app, podemos pasar a revisar nuestro archivo direccionamiento.jsx. En este vamos a describir todo el enrutamiento o direccionamiento de nuestra aplicación.

Es imporante aclarar que Direccionamiento.jsx y los otros archivos jsx deben tener su propia función, return, y export. Esto no lo haré en este post ya que lo hemos realizado en otros casos, pero sigue siendo el mismo proceso para renderizar o exportar un componente en react.

Crear ruta sencilla

Para crear nuestra primera ruta sencilla dentro de nuestro archivo direccionamiento.jsx.

1. Crear archivo JSX al que deseamos direccionar.
2. Importar en direccionamiento.jsx
3. Crear ruta sencilla.

Crear el archivo e importarlo es el proceso que hemos realizado anteeriormente para usar un componente dentro de otro, entonces saltaremos a la ruta sencilla. Por ejemplo, si tienemos homeGlobal.jsx (importado como HomeGlobal) y queremos que la ruta principal «/» redireccione a este componente entonces:

function Direccionamiento(){
     return (
            <Routes>
                    <Route path="/" element={<HomeGlobal />} />
            </Routes>
    );
}

Return solo acepta un componente principal sobre el cual se contenga todo, entonces este debe ser Routes. Dentro si podemos agregar el enrutamiento sencillo, donde redirecciona la ruta principal. De hecho esta SIEMPRE va a ser la prioridad al momento de crear el enrutamiento o direccionamiento en react.

Crear plantillas con Outlet para varias secciones en nuestra web

En este paso, es clave entender cómo trabaja la función Outlet. Básicamente podemos crear plantillas para diferentes secciones de nuestra web. Pero primero hablemos sobre lo que es una plantilla: en esta seleccionamos un header y footer creado previamente, y lo que esté en medio puede variar, pero siempre comparten estos dos elementos.

Ahora outlet en este proceso, es el contenedor de en medio, el cual varía según lo que seleccionemos, pero siempre comaprtiendo el header y footer (o cualquier elemento que deseemos). Entonces vamos a comenzar. Lo primero es importarlo correctamente:

import {Routes, Route, Outlet} from 'react-router-dom';

Este paso es clave para evitar líneas de código e importar correctamente. Una vez realizado, podemos pasar a la creación de plantillas. Es importante saber que previo a esto debemos haber importado el header y footer que queremos usar DENTRO de direccionamiento.jsx. Este es el primer ejemplo de una plantilla:

function PlantillaGlobal(){
        return(
            <div>
                <HeaderGlobal />
                    <Outlet />
                <FooterGlobal />
            </div>
        )
    }

Entonces aquí podemos ver que creamos una función como plantilla, la cual retorna el contenedor completo con los elementos que comprenden la plantilla, y en medio «outlet» el cual será reemplazado a continuación.

Enrutamiento de plantillas: agregar contenido a Outlet

Este es el último paso, pero debemos tener cuidado cómo lo implementamos. Lo primero es saber que Debemos crear una ruta «route» que contenga el elemento principal de plantilla y dentro si agregamos el contenido de outlet. Vamos a ver un ejemplo:

{/* Global */}
                <Route path="/" element={<PlantillaGlobal/>} >
                    <Route index element={<HomeGlobal/>} />
                    <Route path="faq" element={<Faq />} />
                    {/* Todas las páginas que agrege aquí, comaprtirán HeaderGlobal y FooterGlobal */}
                </Route>

Entonces en este ejemplo podemos ver varias cosas:

• Route es el elemento que comprende varios «route» individuales. Pero el superficial es el que contiene la «plantillaGlobal», creada en el paso anterior.
• Dentro creamos los enrutamientos individuales y en el caso de la ruta principal usamos «index». Para las demás ponemos la ruta deseada SIN EL SLASH /.

En el caso anterior funciona como resultado así:

miweb.com/ redirecciona a HomeGlobal
miweb.com/faq redirecciona a Faq

y ambas comparten header y footer de la plantilla PlantillaGlobal, es decir HeaderGlobal y FooterGlobal

y listo chicos! eso es todo, de esta manera podemos hacer un redireccionamiento sencillo y complejo con el uso de plantillas, para diferences secciones de nuestra web. Solo basta con crear varias plantillas con varios elementos insertados y por último, redireccionar!

Video de ayuda

hice este video para ayudarte en el proceso de la configuración. Haz click para ver y si te gusta, no olvides dar like y suscribirte!

Producto sugerido

Si eres como yo que pasa bastatne tiempo frente al compu, puede que la barra de luz te sirva bastante para cuidar tu vista en esas largas jornadas. También te dejo aquí el post para que veas la reseña completa.

Conclusión

Conocer el correcto funcionamiento de react router ayudará a poder direccionar nuestra web sin ningún problema, pero cuando buscamos tal vez algo más complejo podemos entrar a usar la función Oultet de react router como en este caso, para crear plantillas para diferentes secciones de nuestra web.