Anartz Mugika Ledo🤗

Feb 6

12 min read

Qwik — Routing

Claves al detalle para trabajar con las rutas en Qwik

Anartz Mugika Ledo🤗

Anartz Mugika Ledo🤗

Qwik paso a paso desde 0 al detalle

View list
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

Anartz Mugika Ledo🤗

Anartz Mugika Ledo🤗

Qwik paso a paso desde 0 al detalle

View list
9 stories

Presencia en redes sociales

Qwik
Qwik City
Qwik Routes
Framework

--

--

More from Anartz Mugika Ledo🤗

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

AboutHelpTermsPrivacy

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🤗

Anartz Mugika Ledo🤗

381 Followers

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

Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Text to speech