No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Outlet: nested routes

10/30
Recursos

Aportes 15

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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.

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

Jajajaj pregunta c贸smica. 驴C贸mo te sale barba de una clase a otra? 馃槀馃槀

Las 鈥渘ested routes鈥 son 鈥渞utas 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 鈥淥utlet鈥 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

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.

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.

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

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.