Qwik — Routing

Claves al detalle para trabajar con las rutas en Qwik

Qwik paso a paso desde 0 al detalle

9 stories
  • ¿Qué es Routing (Enrutamiento)?
  • Básico. Enrutamiento basado en directorios.
  • Avanzado. Enrutamiento mediante parámetros en diferentes variantes.

Requisitos a tener en cuenta

  • Haber completado la lectura del artículo anterior.
  • Tener instalado Node 16 ó superior.
  • Ganas de seguir aprendiendo.
  • Deseable tener algo de experiencia con otras tecnologías trabajando con diferentes rutas.
  • Tener creado el proyecto de Qwik.

¿Qué es Routing?

Enrutamiento basado en directorios

src/
└── routes/
└── public/
└── index.tsx # (.mdx, .jsx, ...) # http://127.0.0.1:5173/public
src/
└── routes/
├── contact.tsx
├── blog.tsx
├── portfolio.tsx
└── index.tsx
src/
└── routes/
├── portfolio/
│ └── index.tsx # http://127.0.0.1:5173/portfolio
├── contact/
│ └── index.tsx # http://127.0.0.1:5173/contact
├── blog/
│ └── index.tsx # http://127.0.0.1:5173/blog
└── index.tsx # http://127.0.0.1:5173/
  • /blog
src/
└── routes/
├── index.tsx # http://127.0.0.1:5173/
...
└── blog/
├── index.tsx # http://127.0.0.1:5173/blog
└── other-component.tsx # Fichero ignorado y sin mapea en cualquier URL.

Implementando un componente

import { component$ } from '@builder.io/qwik';

export default component$(() => {
return <H1>Hello World!</H1>;
});

Implementando contenido en formato Markdown

src/
└── routes/
├── index.tsx # http://127.0.0.1:5173/
...
└── readme/
├── index.mdx # http://127.0.0.1:5173/readme
└── blog/
├── index.tsx # http://127.0.0.1:5173/blog
# Readme Rutas

Trabajando con formato markdown
* [Twitter](https://twitter.com/mugan86)

Routing Avanzado — Enrutamiento mediante parámetros

src/
└── routes/
├── index.tsx # http://127.0.0.1:5173/
...
└── product/
└── [productId]/
├── index.tsx # http://127.0.0.1:5173/product/1234
└── details/
└── index.tsx # http://127.0.0.1:5173/product/1234/details

Obtención del parámetro ruta desde una URL

import { component$ } from "@builder.io/qwik";
import { useLocation } from "@builder.io/qwik-city";

export default component$(() => {
const location = useLocation();
return (
<>
<div>Product Item Details- Página</div>
<p>Href: {location.href}</p> // URL princ. + path + valor de parámetro de ruta
<p>Pathname: {location.pathname}</p> // path + valor de parámetro de ruta
<p>Product Id: {location.params.productId}</p> // Valor de parámetro de ruta
</>
);
});

Capturar todas las rutas

src/
└── routes/
└── product/
└── [...productIds]/
└── index.tsx
import { component$ } from '@builder.io/qwik';
import { useLocation } from '@builder.io/qwik-city';

export default component$(() => {
const location = useLocation();
return (
<>
<div>Producto - Page principal</div>
<p>Href: {location.href}</p>
<p>Pathname: {location.pathname}</p>
<p>Product Id: {JSON.stringify(location.params.productIds)}</p>
</>
);
});
import { component$ } from '@builder.io/qwik';
import { useLocation } from '@builder.io/qwik-city';

export default component$(() => {
const location = useLocation();
return (
<>
....
<p>Product Id:</p>{' '}
<ul>
{location.params.productIds.split('/').map((id, index) => {
return (id !== '') ? (
<li>
Product select ({index + 1}): {id}
</li>
): undefined
})}
</ul>
</>
);
});
src/
└── routes/
└── product/
└── [...productIds]/
└── index.tsx
└── details/
└──index.tsx
import { component$ } from '@builder.io/qwik';
import { useLocation } from '@builder.io/qwik-city';

export default component$(() => {
const location = useLocation();
return (
<>
<div>Productos - Page con detalles</div>
<p>Href: {location.href}</p>
<p>Pathname: {location.pathname}</p>
<p>Product Id:</p>{' '}
<ul>
{location.params.productIds.split('/').map((id, index) => {
return (id !== '') ? (
<li>
Producto seleccionado ({index + 1}): {id}
</li>
): undefined
})}
</ul>
</>
);
});

Agrupación

src/
└── routes/
└── (products)/
├── detail/
| └──index.tsx
├── preview/
└──index.tsx

Conclusión

Qwik paso a paso desde 0 al detalle

9 stories

Presencia en redes sociales

--

--

[{#frontend:[#mobile:{#android, #kotlin, #ionic}}, {#web:{#angular, #qwik, #bootstrap}}],{#backend: [{#graphql, #nestjs,#express, #mongodb, #mysql}]}]

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anartz Mugika Ledo🤗

[{#frontend:[#mobile:{#android, #kotlin, #ionic}}, {#web:{#angular, #qwik, #bootstrap}}],{#backend: [{#graphql, #nestjs,#express, #mongodb, #mysql}]}]