No tienes acceso a esta clase

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

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

3D
20H
37M
32S

Outlet: nested routes

10/30
Recursos

Aportes 10

Preguntas 0

Ordenar por:

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

o inicia sesi贸n.

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? 馃槀馃槀

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}

Excelente clase Juan.!!

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

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

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

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;
};

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.