Routing con Qwik City

Enlace al repositorio

Como avanzábamos en la lección anterior, del sistema de rutas de Qwik se encarga Qwik City. En la misma página de la documentación oficial de Qwik, hacen una analogía entre Qwik y Qwik City con React y Next.js, o SvelteKit a Svelte. Es un meta-framework, que entre otros problemas nos resuelve el tema del roating. Podemos importar el componente Link de Qwik City y usarlo en nuestros proyectos de la siguiente forma, como bien muestra la documentación sobre la api de Qwik City:


   // https://qwik.builder.io/qwikcity/api/#link
   import { component$ } from '@builder.io/qwik';
   import { Link } from '@builder.io/qwik-city';
   
   export default component$(() => {
     return (
       <div>
         <a href="/docs" class="my-link">
           full-page reload
         </a>
         <Link href="/docs" class="my-link">
           spa navigation
         </Link>
       </div>
     );
   });
          

Utilizando el componente Link podemos hacer uso del routing específico de Qwik City que entre otras cosas no genera un reload de la página.

Vamos ahora a ver la siguiente lección, que versa sobre cómo crear componentes con Qwik.