preact-enroute
v1.2.3
Published
Small preact router (preact port of tj/react-enroute)
Downloads
42
Maintainers
Readme
This is a port of react-enroute for Preact. It works exactly the same way, I only adapted the code style to mine as I am going to maintain this one. I have also reorganised the examples and added an example using hash history.
preact-enroute
Simple Preact router with a small footprint for modern browsers. This package is not meant to be a drop-in replacement for any router, just a smaller simpler alternative.
See path-to-regexp for path matching, this is the same library used by Express.
If you want to try it, play with it on this CodePen (using hash history), on WebpackBin or run the examples (see below).
Installation
$ npm install preact-enroute
Examples
No nesting:
render(
<Router {...state}>
<Route path="/" component={Index} />
<Route path="/users" component={Users} />
<Route path="/users/:id" component={User} />
<Route path="/pets" component={Pets} />
<Route path="/pets/:id" component={Pet} />
<Route path="*" component={NotFound} />
</Router>,
document.querySelector('#app')
);
Some nesting:
render(
<Router {...state}>
<Route path="/" component={Index} />
<Route path="/users" component={Users}>
<Route path=":id" component={User} />
</Route>
<Route path="/pets" component={Pets}>
<Route path=":id" component={Pet} />
</Route>
<Route path="*" component={NotFound} />
</Router>,
document.querySelector('#app')
);
Moar nesting:
render(
<Router {...state}>
<Route path="/" component={Index}>
<Route path="users" component={Users}>
<Route path=":id" component={User} />
</Route>
<Route path="pets" component={Pets}>
<Route path=":id" component={Pet} />
</Route>
</Route>
<Route path="*" component={NotFound} />
</Router>,
document.querySelector('#app')
);
Developing
Build:
$ npm run build
Start pushState example:
$ npm run example-pushstate
Start hash example:
$ npm run example-hash
Running tests:
$ npm test