Outlet: nested routes

Outlet: nested routes

Outlet es el componente que nos permite trabajar con nested routes. Nested es como se define a las cosas que están dentro de otras, por ejemplo, en CSS cuando creamos selectores y propiedades dentro de otros selectores y propiedades.

Lo mismo pasa con las nested routes, son rutas dentro de otras rutas hijas de una ruta madre.

Esto nos sirve para que React nos permita renderizar más de una ruta a la vez, teniendo una ruta dentro de otra ruta madre, y esto se puede hacer varias veces.

Para hacer estos nested routes debemos crear un componente que contenga otro, de hecho haciendo esto nos podemos evitar tener que poner toda la ruta sino que se concatenan:

// ❌
<Route path='/blog' element={<BlogPage />}>
  <Route path='/blog/:slug' element={<BlogPost />} />
</Route>

// ✔️
<Route path='/blog' element={<BlogPage />}>
  <Route path=':slug' element={<BlogPost />} />
</Route>

Aquí es cuando entra nuestro Outlet, lo debemos importar y usarlo en nuestra ruta.

Si probamos el código cambiará el hash pero no el contenido, entonces lo que debemos hacer es insertar la etiqueta Outlet dentro del componente madre ya que dentro de este se renderizará la información que tenga el componente hijo:

import { Link, Outlet } from 'react-router-dom';
...

function BlogPage() {
  return (
    <>
      <h1>Blog</h1>

			{/* Esta etiqueta es donde aparecerá renderizado el componente 
			hijo */}
      <Outlet /> // <--

      <ul>
        {blogdata.map( post => (
          <BlogLink key={post.slug} post={post} />
        ))}
      </ul>
    </>
  );
}

En este momento si usamos la aplicación veremos que tenemos el contenido deBlogPost dentro del contenido de BlogPage dependiendo de donde coloquemos la etiqueta de Outlet.

Así usamos rutas dentro de otras rutas sin perder el contenido de la ruta principal.

Jajajaj pregunta cósmica. ¿Cómo te sale barba de una clase a otra? 😂😂

Haciendo una version simple de pokedex para practicar todo lo aprendido, gracia por las clases

Las “nested routes” son “rutas dentro de otras rutas”, algo así como rutas hijas de una ruta madre. Con esto nos podemos encargar de renderizar mas de una ruta a la vez.

Lo que vamos a hacer es embeber la ruta hija en la ruta madre:

<Route path='/blog' element={<BlogPage/>}>
  <Route path=':slug' element={<BlogPost/>}/>
</Route>

Luego, en el componente madre, vamos a importar “Outlet” para utilizarlo como un representativo de lo que quedó embebido, me recuerda mucho al uso de props.children.

import React from 'react'
import { Link, Outlet } from 'react-router-dom'
import {blogdata} from './blogdata'

function BlogPage() {
  return (
    <>
      <h1>BlogPage</h1>

      <Outlet/>
      <ul>
        {blogdata.map(post => (
            <BlogLink key={post.slug} post={post}/>
          ))}
      </ul>
    </>
  )
}

function BlogLink({ post }) {
  return (
    <li>
      <Link to={`/blog/${post.slug}`}>{post.title}</Link>
    </li>
  );
}

 

export {BlogPage}

Realice un pokedex con todo lo aprendido hasta ahora:
https://juan-bh.github.io/pokedex/#/
Espero les guste

Excelente clase Juan.!!

En caso dado que usen el hook de useRoutes quedaria de la siguiente forma.

export const Router = () => {

  const elements = useRoutes([
    {
      path: "Home",
      element: <Home />,
    },
    {
      path: "Blog",
      element: <BlogPage />,
      children: [
        {
          path: ":slug",
          element: <BlogPost />,
        },

      ]
    },
    {
      path: "Profile",
      element: <ProfilePage />,
    },
    {
      path: "*",
      element: <p>don't exist elements</p>,
    },
    // En este caso la ruta dinámica se almacena en "slug" 
   /*  {
      path:"/blog/:slug",
      element: <BlogPost/>
    }, */

  ]);

  return elements;
};

Link a la documentación del componente Outlet:
Documentación

Se me ocurre utilizar esto en lugar de los portals de react

Nested routes son rutas dentro de otras rutas, sirven por ejemplo cuando queremos dirigir contenido dentro de una ruta como si fuera su ruta hija.

Este es el curso que mejor he entendido de todos lo que llevo con este profesor, se nota el cambio!

Basicamente, la idea de este recurso es que puedas renderizar componentes según su ruta pero sin quitar el contenido del componente o ruta madre.

Outlet: nested routes

.
El término nested lo utilizamos para referirnos a cuando algo está anidado. Es decir, cosas dentro de otras cosas.
.
Un ejemplo de su uso es en los Nested Selectors que lo vemos en CSS, donde podemos agregar selectores y propiedades de CSS dentro de otros selectores y propiedades de CSS. Esto nos permite evitar escribirlo todo, como si fuera una cascada más cascada aún en el CSS.
.
En este caso, Nested Routes hace referencia a rutas dentro de otras rutas, tendríamos entonces rutas hijas de una ruta madre. Por lo que podemos utilizar este componente de Outlet para que React Router DOM nos permita renderizar más de una ruta a la vez y que sepamos qué parte de la ruta va dentro de la ruta madre.
.
En App donde antes teníamos 2 rutas /blog y /blog/:slug vemos que esta ultima vive dentro de /blog. Entonces podemos crear una ruta dentro de la otra, donde ya no necesitaremos en la segunda tener que especificar la ruta completa, sino que solo la parte nueva que vamos a tener.
.

<Route path="/blog" element={<BlogPage />}>
	<Route path=":slug" element={<BlogPost />} />
</Route>

.
Al utilizar Nested Routes lo que espera React Router o bien React Router DOM 6, es que utilicemos el componente Outlet.
.
En caso de que no utilicemos este componente, aún si navegáramos a /blog/:slug seguiría renderizándose nuestro mismo elemento principal, es decir el de la ruta /blog.
.
Entonces, lo que vamos a hacer es que desde el componente renderizado por la ruta madre, vamos a importar y utilizar el componente Outlet.
.

import React from 'react';
import { Link, Outlet } from 'react-router-dom';
import { blogdata } from './blogdata'

function BlogPage() {
  return (
    <>
      <h1>Blog</h1>

      <Outlet />
      
      <ul>
        {blogdata.map(post => (
          <BlogLink key={post.slug} post={post} />
        ))}
      </ul>
    </>
  );
}

...
export { BlogPage };

.
Esto nos permite renderizar el componente de la ruta hija, pero manteniendo el contenido del componente renderizado de la ruta madre. En este caso, al navegar a /blog/:slug en realidad mantendremos el contenido de BlogPage, sin embargo Outlet renderizará a BlogPost entre el titulo del blog y la lista de blog post. Finalmente si nos devolvemos a /blog entonces no se mostrará el componente BlogPost.
.
Entonces podemos tener componentes que pueden aparecer o desaparecer sin quitar el resto del contenido dentro de la ruta madre principal en la que estábamos.

Acá al usar el Outlet, el botón back no debería entonces tener el navigate(-1), ya que, como se muestran los demás blogs debajo, pues, el usuario puede navegar allí mismo y al darle back, retorna es al blog anterior y no al main blog. Es bueno usar ese navigate, si vamos a navegar a la página en si.

https://whip-soil-3b5.notion.site/Outlet-nested-routes-a86e005f823a4610b21122aad8a23cd5?pvs=4