etch-router
v0.2.2
Published
Routing for Etch
Downloads
16
Readme
Etch-Router
A Router for Etch that provides methods to link and pass props to Etch components
Install
Install Etch-Router from npm
npm install --save etch etch-router
Etch has to be installed seperately, but npm will throw an error when Etch-Router is installed into a package without it.
Usage
Require Router
and Route
from etch-router
.
const {Router, Route} = require('etch-router')
Router & Route a just Etch components that are mounted to the DOM. They have no HTML output and instead output the etch components passed to them in their props.
Define your Router as you would any Etch component:
var router = new Router(
{currentPath: '/'},
new Route(
{path: '/', component: Layout, name: 'Index'},
new Route({path: '/', component: Home, name: 'Home'}),
new Route({path: '/about', component: About, name: 'About'})
)
)
Append your router to the document like normal:
document.body.appendChild(router.element)
You will now have the Home
component as a child of the Layout
component. To navigate to other pages update the router
props to a new currentPath
e.g.
router.update({currentPath: '/about'})
Etch will handle the DOM update and you will now have About
as a child of Layout
Docs
The etch-router docs are built from docs/
and is a functional etch-router application.
Inside the docs/
folder run npm install
to install all the dependencies.
Any edits to the Javascript also needs to include the compiled webpack bundle.