https://github.com/arcath/etch-router
Router component for Etch
https://github.com/arcath/etch-router
electron etch router
Last synced: 5 months ago
JSON representation
Router component for Etch
- Host: GitHub
- URL: https://github.com/arcath/etch-router
- Owner: Arcath
- License: mit
- Created: 2017-05-11T09:51:49.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-09-12T09:34:11.000Z (over 1 year ago)
- Last Synced: 2025-04-13T11:06:33.357Z (10 months ago)
- Topics: electron, etch, router
- Language: JavaScript
- Homepage: http://etch-router.arcath.net/
- Size: 4.83 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE.md
- Support: support/register-babel.js
Awesome Lists containing this project
README
# Etch-Router
[](https://travis-ci.org/Arcath/etch-router) [](https://gitter.im/etch-router/Lobby)
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`.
```javascript
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:
```javascript
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:
```javascript
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.
```javascript
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.