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.
<aside> 💡 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.
</aside>
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=':slug' element={<BlogPost />} />**
</Route>
Aquí es cuando entra nuestro Outlet, lo debemos importar y usarlo en nuestra ruta.
import { Link, Outlet } from 'react-router-dom';
...
function BlogPage() {
return (
<>
<h1>Blog</h1>
**<Outlet />**
<ul>
{blogdata.map( post => (
<BlogLink key={post.slug} post={post} />
))}
</ul>
</>
);
}
<aside> 💡 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.
</aside>
https://github.com/FROSTYLAN/router-example/commit/329408d6f2735cd79c8bf4536d4d9c6910c2f0c7
GitHub - platzi/curso-react-router-proyecto1 at outlet