Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jorgebucaran/hyperapp-router
Declarative routing for Hyperapp V1 using the History API.
https://github.com/jorgebucaran/hyperapp-router
hyperapp link router
Last synced: 2 months ago
JSON representation
Declarative routing for Hyperapp V1 using the History API.
- Host: GitHub
- URL: https://github.com/jorgebucaran/hyperapp-router
- Owner: jorgebucaran
- License: mit
- Archived: true
- Created: 2015-04-07T03:51:44.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2019-05-30T16:55:28.000Z (over 5 years ago)
- Last Synced: 2024-05-02T05:31:13.960Z (9 months ago)
- Topics: hyperapp, link, router
- Language: JavaScript
- Homepage:
- Size: 82 KB
- Stars: 257
- Watchers: 13
- Forks: 50
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- hyperawesome - @hyperapp/router - The official router for Hyperapp. (Utilities V1)
README
# Hyperapp Router
[](https://travis-ci.org/hyperapp/router) [](https://codecov.io/gh/hyperapp/router) [](https://www.npmjs.org/package/hyperapp) [](https://hyperappjs.herokuapp.com "Join us")
Hyperapp Router provides declarative routing for [Hyperapp](https://github.com/hyperapp/hyperapp) using the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History).
[Try this example online](http://hyperapp-router.surge.sh).
```jsx
import { h, app } from "hyperapp"
import { Link, Route, location } from "@hyperapp/router"
const Home = () =>
Home
const About = () => About
const Topic = ({ match }) => {match.params.topicId}
const TopicsView = ({ match }) => (
Topics
-
Components
-
Single State Tree
-
Routing
{match.isExact &&
Please select a topic.
}
)
const state = {
location: location.state
}
const actions = {
location: location.actions
}
const view = state => (
-
Home
-
About
-
Topics
)
const main = app(state, actions, view, document.body)
const unsubscribe = location.subscribe(main.location)
```
## Installation
npm i @hyperapp/router
Then with a module bundler like Rollup or Webpack, use as you would anything else.
```jsx
import { Link, Route, Switch, Redirect, location } from "@hyperapp/router"
```
If you don't want to set up a build environment, you can download Hyperapp Router from a CDN like [unpkg.com](https://unpkg.com/@hyperapp/router) and it will be globally available through the window.hyperappRouter object. We support all ES5-compliant browsers, including Internet Explorer 10 and above.
## Usage
Add the `location` module to your state and actions and start the application.
```jsx
const state = {
location: location.state
}
const actions = {
location: location.actions
}
const main = app(
state,
actions,
(state, actions) =>
Hello!
} />,
document.body
)
```
Then call `subscribe` to listen to location change events.
```js
const unsubscribe = location.subscribe(main.location)
```
## Components
### Route
Render a component when the given path matches the current [window location](https://developer.mozilla.org/en-US/docs/Web/API/Location). A route without a path is always a match. Routes can have nested routes.
```jsx
```
#### parent
The route contains child routes.
#### path
The path to match against the current location.
#### render
The component to render when there is a match.
### Render Props
Rendered components are passed the following props.
```jsx
const RouteInfo = ({ location, match }) => (
Url: {match.url}
Path: {match.path}
{Object.keys(match.params).map(key => (
-
{key}: {match.params[key]}
))}
Location: {location.pathname}
)
```
#### location
The [window location](https://developer.mozilla.org/en-US/docs/Web/API/Location).
#### match.url
The matched part of the url. Use to assemble links inside routes. See [Link](#link).
#### match.path
The route [path](#path).
#### match.isExact
Indicates whether the given path matched the url exactly or not.
### Link
Use the Link component to update the current [window location](https://developer.mozilla.org/en-US/docs/Web/API/Location) and navigate between views without a page reload. The new location will be pushed to the history stack using `history.pushState`.
```jsx
const Navigation = (
-
Home
-
About
-
Topics
)
```
#### to
The link's destination url.
### Redirect
Use the Redirect component to navigate to a new location. The new location will override the current location in the history stack using `history.replaceState`.
```jsx
const Login = ({ from, login, redirectToReferrer }) => props => {
if (redirectToReferrer) {
return
}
return (
You must log in to view the page at {from}.
{
auth.authenticate(userId => login(userId))
}}
>
Log in
)
}
```
#### to
The redirect's destination url.
#### from
Overwrite the previous pathname. See [location.previous](#previous).
### Switch
Use the Switch component when you want to ensure only one out of several routes is rendered. It always renders the first matching child.
```jsx
const NoMatchExample = (
}
/>
)
```
## Modules
### location
#### pathname
Same as window.location.pathname.
#### previous
The previous location.pathname. Useful when redirecting back to the referrer url/pathname after leaving a protected route.
#### go(url)
Navigate to the given url.
## License
Hyperapp Router is MIT licensed. See [LICENSE](LICENSE.md).