Guía y mejores prácticas

Router funciona mejor cuando la URL se trata como la fuente de verdad para la navegación, los filtros, las pestañas y el estado de la interfaz de usuario que se puede compartir. Mantenga las declaraciones de ruta cerca del diseño que controlan y luego use la API JavaScript solo para comportamientos que no se pueden expresar claramente en HTML.

Comience con rutas declarativas

Para la mayoría de las páginas, utilice <page-route>, <page-link> y <page-redirect> directamente en el documento. Esto hace que la aplicación sea comprensible únicamente desde la estructura HTML.

html
<nav>
    <page-link path="/" title="Home">Home</page-link>
    <page-link path="/projects" title="Projects">Projects</page-link>
    <page-link path="/settings" title="Settings">Settings</page-link>
</nav>

<main>
    <page-route path="/" src="./pages/home.html"></page-route>
    <page-route
        path="/projects"
        exact="false"
        src="./pages/projects.js"
    ></page-route>
    <page-route path="/settings" src="./pages/settings.html"></page-route>
    <page-route path="/404">Page not found.</page-route>
    <page-redirect path="/404"></page-redirect>
</main>

Utilice rutas anidadas para diseños

Las rutas principales son útiles para secciones que comparten navegación, rumbos o datos de ruta. Los caminos secundarios extienden la ruta principal más cercana.

html
<page-route path="/projects/:projectId" exact="false">
    <header>
        <h1>Project <page-data param="projectId">unknown</page-data></h1>
        <page-link path="$/overview">Overview</page-link>
        <page-link path="$/activity">Activity</page-link>
        <page-link path="$/settings">Settings</page-link>
    </header>

    <page-route path="/overview" src="./projects/overview.js"></page-route>
    <page-route path="/activity" src="./projects/activity.html"></page-route>
    <page-route path="/settings" src="./projects/settings.js"></page-route>
    <page-redirect path="$/overview" type="always"></page-redirect>
</page-route>

Utilice rutas de consulta para el estado de la interfaz de usuario

Utilice <page-route-query> cuando la vista siga siendo la misma página pero un valor de consulta debe elegir una pestaña, cajón, filtro o modal.

html
<page-link search="panel=details" keep-current-search>Details</page-link>
<page-link search="panel=activity" keep-current-search>Activity</page-link>

<page-route-query key="panel" value="details">
    <h2>Details</h2>
</page-route-query>

<page-route-query key="panel" value="activity" src="./panels/activity.html">
    <p slot="loading">Loading activity...</p>
</page-route-query>

Prefiera component para aplicaciones escritas

Si está representando rutas desde el código Markup o Web Component, la propiedad component evita las importaciones dinámicas basadas en cadenas y proporciona a los paquetes una referencia directa.

javascript
import { html } from '@beforesemicolon/web-component'
import HomePage from './pages/HomePage.js'
import ProjectPage from './pages/ProjectPage.js'

export const routes = html`
    <page-route path="/" component="${HomePage}"></page-route>
    <page-route
        path="/projects/:projectId"
        component="${ProjectPage}"
    ></page-route>
`

Registrar guardias antes de la navegación

Los guardias se ejecutan antes de que se notifique a los oyentes de ruta y a los componentes de ruta. Regístrelos durante el inicio de la aplicación, antes de representar rutas protegidas o activar la navegación.

javascript
import {
    registerGlobalGuard,
    registerRouteGuard,
} from '@beforesemicolon/router'

registerGlobalGuard((pathname) => {
    if (pathname.startsWith('/account') && !session.currentUser) {
        return '/login'
    }

    return true
})

registerRouteGuard('/admin/:section', async () => {
    return (await session.hasRole('admin')) || '/unauthorized'
})

Mantenga los 404 al final

<page-redirect> comprueba las rutas que se han registrado. Coloque redireccionamientos alternativos después de las declaraciones <page-route> válidas de las que dependen.

html
<page-route path="/">Home</page-route>
<page-route path="/docs" exact="false">Docs</page-route>
<page-route path="/404">Not found</page-route>

<page-redirect path="/404"></page-redirect>

Elija el historial o el enrutamiento hash con anticipación

El enrutamiento histórico proporciona URL limpias y es el predeterminado. El enrutamiento hash es útil cuando su host no puede reescribir rutas desconocidas en index.html.

javascript
import { setRoutingMode } from '@beforesemicolon/router'

setRoutingMode('hash')

Lista de verificación de producción

<< InstalaciónGuía de IA >>
editar este documento