Guide et bonnes pratiques Router - Router par Before Semicolon

Guide et bonnes pratiques

Router fonctionne mieux lorsque l'URL est traitée comme la source de vérité pour la navigation, les filtres, les onglets et l'état de l'interface utilisateur partageable. Conservez les déclarations de route proches de la présentation qu'elles contrôlent, puis utilisez l'API JavaScript uniquement pour les comportements qui ne peuvent pas être exprimés proprement dans HTML.

Commencez par des routes déclaratives

Pour la plupart des pages, utilisez <page-route>, <page-link> et <page-redirect> directement dans le document. Cela permet à l'application de rester compréhensible uniquement à partir de la structure 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>

Utiliser des itinéraires imbriqués pour les mises en page

Les itinéraires parents sont utiles pour les sections qui partagent des données de navigation, de titres ou d'itinéraire. Les chemins enfants prolongent la route parent la plus proche.

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>

Utiliser des itinéraires de requête pour l'état de l'interface utilisateur

Utilisez <page-route-query> lorsque la vue est toujours la même page mais qu'une valeur de requête doit choisir un onglet, un tiroir, un filtre ou un 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>

Préférez `component` pour les applications typées

Si vous restituez des itinéraires à partir du code Markup ou Web Component, la propriété component évite les importations dynamiques basées sur des chaînes et donne aux bundlers une référence directe.

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>
`

Les gardes s'exécutent avant que les auditeurs de route et les composants de route ne soient avertis. Enregistrez-les au démarrage de l'application, avant de restituer les itinéraires protégés ou de déclencher la navigation.

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'
})

Gardez les 404 en dernier

<page-redirect> vérifie les itinéraires enregistrés. Placez les redirections de secours après les déclarations <page-route> valides dont elles dépendent.

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>

Choisissez l'historique ou le routage de hachage tôt

Le routage historique donne des URL propres et constitue la valeur par défaut. Le routage de hachage est utile lorsque votre hôte ne peut pas réécrire les chemins inconnus vers index.html.

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

setRoutingMode('hash')

Liste de contrôle de production

Attribuez à chaque itinéraire significatif un document title via <page-link>, <page-route> ou votre propre gestionnaire onPageChange.
Utilisez les paramètres de route pour l’identité des ressources et les paramètres de recherche pour l’état d’affichage partageable.
Gardez les modules d’itinéraire petits et chargez les écrans secondaires paresseusement.
Utilisez name sur les groupes de routes qui se chevauchent afin que seule la première route correspondante soit rendue.
Utilisez payload uniquement pour un état de navigation transitoire. Conserver l’état important dans l’URL ou le magasin de données d’application.

modifier ce document