Uso de React router

By:

En este articulo veremos como usar react routes.

Para poder comprender este articulo necesitas saber react básico.



Que es react router

Es una librería que nos ayudara a generar una navegación en nuestra pagina o proyecto, mas fácil e mas dinámica, ya que ademas de facilitar el movimiento, también podremos disminuir los tiempos de carga.

Instalación

Para poder usarlo, en nuestro proyecto escribiremos el comando 'npm install react-router-dom'. Por si hay dudas, es necesario ya tener el proyecto creado y tener instalado npm o node.js.

 

1. Crear la ruta mayor

Crearemos un archivo el cual sera quien maneje todas las rutas posibles en nuestro proyecto.

Preferiblemente crearemos una nueva carpeta llamada routes, y crearemos el archivo .jsx.

 

2. Código

Para el código  sera así:


import { createBrowserRouter, RouterProvider } from "react-router-dom";

const rutas = createBrowserRouter([
    {
        path: "/",
        element: <div>Hola</div>,
    },
   
]);

function MisRutas() {
    return(
        <RouterProvider router={rutas} />
    );
}

export default MisRutas;


El import, trae dos métodos importantes.

El cual usamos uno en la variable rutas, es 'createBrowserRouter' es donde crearemos las rutas y que se mostrara en ellas. 

 2.1 Rutas

Para crear una ruta seguiremos el siguiente código:

 
import Home from '../views/Home';
import ErrorPagina404 from "../views/Errors";
 
const rutas = createBrowserRouter([
    {
        path: "/",
        element: <Home></Home>,
        errorElement: <ErrorPagina404></ErrorPagina404>
    },
]);
 

Como vemos, se crea un objeto el cual tiene:

  • path: es la ruta del navegador, como: "pagina-ejemplo/monitos"; entonces, la primera pagina es el home o la landing page, la cual por buenas practicas usaremos: "/". Si queremos agregar otra pagina: "/perfil".

  • element: es lo que se mostrará, en el ejemplo mostraremos el objeto Home, estos objetos se deberán importar, preferiblemente, de la carpeta de las paginas. Así:

    import Home from '../views/Home';

  • errorElement: sabemos, que las paginas siempre tienen una del error 404, la cual es cuando no existe una pagina que el usuario busque, entonces esta parte es para agregar ese elemento importado.

2.2 Función

Crearemos una función la cual devolverá el objeto de las rutas. Luego la exportamos:


function MisRutas() {
    return(
        <RouterProvider router={rutas} />
    );
}

export default MisRutas;

 2.3 Uso de las rutas

Para poder usar las rutas vamos a nuestro archivo App y quitamos todo y solo importamos nuestro archivo de rutas, así:

 
import Routes from './routes/routes';

export default function App() {
  return <Routes/>;
}
 

 2.4 Mejora de carga

Han visto, por ejemplo, en la pagina de la documentación de mozilla, que parece que lo único que cambia es el contenido... Y la navegación no se actualiza... En cambio otras paginas recargan toda la pagina... Esto se puede lograr usando un nuevo atributo en el objeto de ruta:

 
const rutas = createBrowserRouter([
    {
        path: "/navegacion",
        element: <Nav></Nav>,
        children: [
            {
                path: "ejemplo-1", // No se debe poner: '/'
                element: <Eje1></Eje1>
            },
            {
                path: "ejemplo-2",
                element: <Eje2></Eje2>
            }
        ],
    }
]);
 

En el nuevo atributo children, crearemos una lista de objetos, los cuales serán rutas normales, les agregaremos la ruta y su respectivo elemento. Y así evitamos recargar toda la pagina y solo lo hacemos con el elemento que si cambiara.

 

Pero entonces para poder mostrar esos elementos de manera automatica, usaremos un nuevo objeto importable, asi:

 
 
import {Outlet} from "react-router-dom";

export default function Ejemplo() {
    return(
        <div>
            <h1>Mi ejemplo</h1>
 
            <Outlet/>
        </div>
    );
}
 

El elemento importable 'outlet' sera el cual mostrara los elementos hijos, como en el ejemplo, mostrara: (según la ruta del navegador)

En la ruta "/navegacion/ejemplo-1"  saldrá el elemento <Eje1/> y así con el otro ejemplo.

 

2.5 Envió de datos

En ciertas ocasiones, por ejemplo, queremos mostrar un elemento especifico, pero este elemento es dinámico, para ello crearemos una variable dentro de la ruta. Así:

 
const rutas = createBrowserRouter([
    {
        path: "objeto/:id",
        element: <Obj></Obj>
    },
]);
 

El ':id' es la variable que tendremos que pasar. Por ejemplo, en el elemento a ser clickeado se activara esta función:

 
import { useNavigate } from 'react-router-dom';
   
const NAVIGATE = useNavigate();
const eventoClick = (id) => {
   NAVIGATE(`/detalle/${id}`);
}

 

La cual nos lleva a la pagina detalle. Si detallamos, veremos una variable 'navigate', esta usa un hook de react router, el cual es un método al que debemos pasar una ruta existente, con la posibilidad de agregar variables (como esa en el código). Para poder usar esta variable, en el ejemplo:

 
import {useParams} from "react-router-dom";

export default function MostrarObjetoPorId() {
    const {id} = useParams(); // <---
 
    const [obj, setObj] = useState({});

    useEffect(() => {
        // Obtenemos de la API el objeto especifico
        // Y lo guardamos en la variable 'obj' 
    }, []);

    return(
        <div>
            <h1>{obj.nombre}</h1>
            <p>Mensaje: ${obj.mensaje}</p>
        </div>
    );
}
 


En este nuevo objeto, para poder usar la variable ':id' tendremos que usar un nuevo hook de react router, el cual es useParams(), así:
const {id} = useParams();

Al obtener la variable, en el ejemplo la buscamos en la API y obtenemos el objeto especifico y lo retornamos.

3. Formas de navegar

Tenemos dos opciones, la que ya vimos, que es usar un hook, o la que es un objeto.
 
useNavigate: lo importamos y lo guardamos en una variable. Para usarla solo llamamos la variable y le pasamos la dirección, como en el ejemplo:
 
import { useNavigate } from 'react-router-dom';
   
const NAVIGATE = useNavigate();
NAVIGATE(`/detalle`);

Es útil cuando se necesita hacer e cambio en el código JS y no en el JSX.

Link: tiene la misma función que el anterior, pero este se usa en el JSX, como un botón; así:
 

import { Link } from "react-router-dom";
 
export default function BotonPerfil() {

    return (
        <div>
            <Link to="/perfil"><button>Perfil</button></Link>
        </div>
    );
}
 
Como ven, exportamos un elemento JSX el cual es un botón que nos lleva a perfil. Algo útil es envolver el elemento con el objeto <Link/> para que os lleve a la ruta, que estará en el atributo 'to'.



Has llegado al final, y ahora puedes usar las rutas en react para hacer mas fácil la navegación en tu pagina web.



Bibliografía