Quickstart

Routes typees

import {
  Link,
  Route,
  RoutingContext,
  RouterRenderer,
  createRouter,
  getResourcePage,
} from '@plumile/router';

const routes: Route<any, any, any>[] = [
  {
    path: '/',
    resourcePage: getResourcePage('Home', () => import('./pages/Home')),
  },
];

const { context } = createRouter(routes);

export function App() {
  return (
    <RoutingContext.Provider value={context}>
      <Link to="/">Home</Link>
      <RouterRenderer fallback={<div>Loading...</div>} />
    </RoutingContext.Provider>
  );
}

Le flux de base est celui du README package: definir les routes, creer le contexte router, fournir ce contexte, puis rendre les liens et la route active.

Filtres d’URL

import {
  defineSchema,
  numberField,
  parse,
  setFilter,
  stringify,
  stringField,
} from '@plumile/filter-query';

const schema = defineSchema({
  page: numberField(),
  title: stringField(['contains']),
});

const { filters, diagnostics } = parse('page=2&title.contains=agent', schema);
const next = setFilter(filters, schema, 'page', 'eq', 3);
const query = stringify(next, schema);

Consultez diagnostics avant de faire confiance a une chaine de recherche fournie par l’utilisateur. La serialisation utilise un ordre stable defini par le schema et les operateurs.