@ajces/router
Utilities for routing client-side pages.
Last updated 2 years ago by andyrj .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @ajces/router 
SYNC missed versions from official npm registry.

AJCES router

This is forked from hyperapp/router and extracts the match logic into a framework agnostic Matcher. Additional handling of meta tag diffing on route changes, has also been added, using array of route objects [{path, view, meta}] instead of an array of arrays which I feel is clearer in the code.

The defaultMeta provided to the Router will allow defaults for routes that choose not to specify a meta value, anything supplied to a route meta object will be merged with defaultMeta via Object.assign({}, defaultMeta, match.meta)

There are meta tags that cause bugs in certain browsers if modified after page load, these are skipped in our meta diff to avoid issues: origin, referrer, viewport. ( any other key value pair should work in the meta object )

import { h, app } from "hyperapp";
import { router, updateMeta, Link, Router, Route } from "@ajces/router";
import { Header, Nav, Footer, About, Profile, Nested, NestedRoutes } from "./components";

app({
  state: { count: 0 },
  view: (state, actions) => (
    <div>
      <Header />
      <Nav />
      <Router 
        meta={
          title: "Hyperapp Meta Router!",
          description: "hyperapp componad based routing experiment",
          keywords: "hyperapp, routing, router, meta",
          author: "Andy Johnson"
        }
        pathname={state.router.path}
        updateMeta={updateMeta}
      >
        <Route path="/" meta={params => ({ title: "Home" })} component={props => (
          <div>
            <h1>
              {"HOME!"}
            </h1>
            <Link to="/about" go={actions.router.go} />
            <Link to="/profile/andy" go={actions.router.go} />
          </div>
        )} />
        <Route path="/about" onroute={match => console.log(match)} component={About} />
        <Route path="/profile/:user" meta={params => ({ title: `Profile - ${params.user}` })} component={Profile} />
        <Route path="/nested" component={Nested}>
          <Route path="/routes" onroute={match => console.log("matched path /nested/routes")} component={NestedRoutes}>
        </Route>
      </Router>
      <Footer />
    </div>
  ),
  mixins: [router()]
});

License

@ajces/router is MIT licensed. See LICENSE.

Current Tags

  • 3.2.0                                ...           alpha (2 years ago)
  • 2.1.1                                ...           latest (2 years ago)

15 Versions

  • 3.2.0                                ...           2 years ago
  • 3.1.1                                ...           2 years ago
  • 2.1.1                                ...           2 years ago
  • 2.1.0                                ...           2 years ago
  • 2.0.1                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 1.1.5                                ...           2 years ago
  • 1.1.4                                ...           2 years ago
  • 1.1.3                                ...           2 years ago
  • 1.1.2                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 75
Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |