Rutas dinámicas del enrutador React

1. Rutas dinámicas del enrutador React
2. Componentes personalizados del enrutador React
3. Ejemplo de rutas dinámicas de React Router

React es una de las bibliotecas, si no la más popular, para crear aplicaciones web. Sin embargo, no mucha gente sabe que React es solo una biblioteca que se ocupa de la representación de la interfaz de usuario.

No tiene soluciones integradas para el enrutamiento como lo hace Angular. Por esta razón, los desarrolladores de React necesitan usar bibliotecas externas para implementar funciones de enrutamiento en React.

La mayoría de los desarrolladores usan react-router para implementar funciones de navegación y enrutamiento en React.

Rutas dinámicas del enrutador React

Si va a crear una aplicación web que tenga más de una página, necesitará definir rutas, que son patrones para URL.

Por ejemplo, puede usar react-router para especificar que si la URL es www.mywebsite.com/, React debería mostrar su componente Inicio.

Las cosas se complican un poco más cuando su aplicación tiene muchas páginas del mismo tipo. Por ejemplo, es común que cuando visitas un blog, cada publicación tenga su título en la URL, así:

Cuando tiene miles de publicaciones o productos, no puede definir rutas manualmente para cada uno. Afortunadamente, React Router le permite crear fácilmente rutas dinámicas que generan automáticamente una URL para un elemento específico.

Este artículo mostrará cómo lograr dicha funcionalidad en las aplicaciones React.

Componentes personalizados del enrutador React

Primero, comencemos con cuatro componentes personalizados que importará. Estos son los componentes personalizados más utilizados de la biblioteca react-router.

El <BrowserRouter> es el componente principal que maneja la navegación entre páginas. Funciona con el navegador para mostrar la página correcta para cada URL.

El <BrowserRouter> debe abarcar toda la aplicación. Solo puede usar otros componentes personalizados entre las etiquetas de apertura y cierre de este contenedor.

Lea documentación oficial para obtener más información.

Usamos los componentes <Routes> y sus componentes secundarios <Route> para especificar qué se debe representar en función de la URL (ubicación) actual. Aprende más aquí].

Finalmente, el componente <Link> es una versión modificada del elemento <a> de HTML. Proporciona una transición más suave de una página a otra.

Cuando los usuarios hacen clic en una URL <Enlace>, la aplicación React no se vuelve a cargar. Inmediatamente lleva a los usuarios al destino.

Obtenga más información sobre el componente <Link> aquí.

Ejemplo de rutas dinámicas de React Router

Veamos un ejemplo práctico de una aplicación con tres puestos.

import "./styles.css";
import { BrowserRouter, Routes, Link, Route } from "react-router-dom";
import { useParams } from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="posts/:title" element={<Post />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() {
  var posts = [
    { title: "Guide to React" },
    { title: "Guide to Vue" },
    { title: "Guide to Angular" }
  ];
  return (
    <div className="App">
      Hello
      {posts.map((post) => (
        <>
          <br />
          <Link to={"posts/" + post.title}>{post.title}</Link>
          <br />
        </>
      ))}
    </div>
  );
}

function Post() {
  const urlParameters = useParams();
  return <h1>{urlParameters.title}</h1>;
}

Puedes jugar con el código en CodeSandbox.

Primero, importamos cuatro componentes personalizados: <BrowserRouter>, <Routes>, <Route>, <Link>. También importamos el gancho useParams, que explicaremos más adelante.

Tenemos un componente principal, App, que contiene componentes <Ruta> para mapear rutas con componentes.

La primera instancia del componente <Ruta> es bastante simple. Le dice a React que renderice el componente <Home> si el visitante está en la página '/' ('website.com/').

La segunda instancia del componente <Ruta> es diferente. Su atributo ruta es igual a la cadena "posts/:title".

Esto significa que mostrará el componente <Post> si la URL coincide con "posts/:title". El punto y coma : significa que la parte del título de la URL se puede generar dinámicamente.

Si la publicación tiene el título 'Guía para reaccionar', la URL será 'website.com/posts/Guide To React'.

Generamos la URL dinámica en el componente Home. Tenemos una variedad de tres publicaciones, cada una de ellas con títulos únicos.

Usamos el método JavaScript .map() para generar componentes <Link> personalizados que crean enlaces únicos para cada publicación.

La parte más importante es el atributo to del componente personalizado <Link>. Miremos más de cerca.

<Link to={"posts/" + post.title}>{post.title}</Link>

Concatenamos dos cadenas: el valor "posts" y post.title, que es único para cada publicación. Como resultado, cada URL tendrá el título de la publicación en la URL.

Acceder a valores desde la URL

Cada componente <Ruta> especifica la ruta de la URL y qué componente debe procesarse en función de la URL. Una vez que se procesa el componente secundario <Post>, puede usar el enlace useParams() para acceder a la variable :title desde la URL.

function Post() {
  const urlParameters = useParams();
  return <h1>{urlParameters.title}</h1>;
}

Usamos la sintaxis {urlParameters.title} para mostrar el valor de los parámetros de URL. Cualquier expresión de JavaScript debe estar entre llaves.