You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Apr 6, 2025. It is now read-only.
@hyperapp/router provides utilities for routing client-side pages with [Hyperapp](https://github.com/hyperapp/hyperapp) using the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History).
7
+
@hyperapp/router provides components for routing client-side pages with [Hyperapp](https://github.com/hyperapp/hyperapp) using the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History).
consttopicView= ({ match }) =><h3>{match.params.topicId}</h3>
38
+
39
+
constactions=app({
40
+
state: {
41
+
location:location.state
42
+
},
43
+
actions: {
44
+
location:location.actions
45
+
},
46
+
view:state=>
47
+
<div>
48
+
<ul>
49
+
<li>
50
+
<Link to="/">Home</Link>
51
+
</li>
52
+
<li>
53
+
<Link to="/about">About</Link>
54
+
</li>
55
+
<li>
56
+
<Link to="/topics">Topics</Link>
57
+
</li>
58
+
</ul>
59
+
60
+
<hr />
61
+
62
+
<Route path="/" view={homeView} />
63
+
<Route path="/about" view={aboutView} />
64
+
<Route parent path="/topics" view={topicsView} />
65
+
</div>
32
66
})
67
+
68
+
location.subscribe(actions.location)
33
69
```
34
70
35
71
## Installation
@@ -43,7 +79,7 @@ Download the minified library from a [CDN](https://unpkg.com/@hyperapp/router).
43
79
Then import from `router`.
44
80
45
81
```jsx
46
-
const { router, Link } = router
82
+
const { location, Route, Link } = router
47
83
```
48
84
49
85
Or install with npm / Yarn.
@@ -52,120 +88,140 @@ Or install with npm / Yarn.
52
88
npm i <ahref="https://www.npmjs.com/package/@hyperapp/router">@hyperapp/router</a>
53
89
</pre>
54
90
55
-
Then [bundle](https://github.com/hyperapp/hyperapp/blob/master/docs/getting-started.md#build-pipeline) and use as you would any other module.
91
+
Then with a module bundler like [Rollup](https://github.com/rollup/rollup) or [Webpack](https://github.com/webpack/webpack), use as you would anything else.
56
92
57
93
```jsx
58
-
import { router, Link } from"@hyperapp/router"
94
+
import { location, Route, Link } from"@hyperapp/router"
59
95
```
60
96
61
-
## Mixin
97
+
## Usage
62
98
63
-
Use the router as any other [mixin](https://github.com/hyperapp/hyperapp/blob/master/docs/mixins.md). Then compose your view as an array of [routes](#routes).
99
+
Add the `location` state and actions to your application.
64
100
65
101
```jsx
66
-
app({
67
-
view: [
68
-
["/", state=><h1>Hi.</h1>]
69
-
["*", state=><h1>404</h1>],
70
-
],
71
-
mixins: [router()]
102
+
constactions=app({
103
+
state: {
104
+
location:location.state
105
+
},
106
+
actions: {
107
+
location:location.actions
108
+
}
72
109
})
73
110
```
74
111
75
-
### Routes
76
-
77
-
A route is a tuple that consists of a [path](#paths) and a [view](https://github.com/hyperapp/hyperapp/blob/master/docs/view.md).
Routes are matched in the following three scenarios:
112
+
Then call `subscribe` to listen to location change events.
84
113
85
-
- After the page is loaded.
86
-
- When the browser fires a [popstate](https://developer.mozilla.org/en-US/docs/Web/Events/popstate) event.
87
-
- When [actions.router.go](#actionsroutergo) is called.
114
+
```js
115
+
location.subscribe(actions.location)
116
+
```
88
117
89
-
If [location.pathname](https://developer.mozilla.org/en-US/docs/Web/API/Location) matches the path of a supplied route, we'll render its view.
118
+
## Modules
90
119
91
-
### Paths
120
+
### location
92
121
93
-
#### `/`, `/foo`
122
+
#### pathname
123
+
#### previous
94
124
95
-
Match if location.pathname is `/`, `/foo`, etc.
125
+
#### go
96
126
97
-
#### `/:key`
98
127
99
-
Match location.pathname using `[A-Za-z0-9]+` and save the matched path to [state.router.params](#staterouterparams).
128
+
## Components
100
129
101
-
#### `*`
130
+
###Route
102
131
103
-
Match anything. Declaration order dictates matching precedence. If you are using `*`, declare it last.
132
+
Render some UI when the current [window location](https://developer.mozilla.org/en-US/docs/Web/API/Location) matches the given path. A route with no path always matches. Routes work as expected when nested inside other routes.
Update [location.pathname](https://developer.mozilla.org/en-US/docs/Web/API/Location)with the supplied path.
154
+
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`.
130
155
131
-
<pre>
132
-
actions.router.go(<ahref="#paths">path</a>)
133
-
</pre>
156
+
```jsx
157
+
<ul>
158
+
<li>
159
+
<Link to="/">Home</Link>
160
+
</li>
161
+
<li>
162
+
<Link to="/about">About</Link>
163
+
</li>
164
+
<li>
165
+
<Link to="/topics">Topics</Link>
166
+
</li>
167
+
</ul>
168
+
```
134
169
135
-
###events.route
170
+
#### to
136
171
137
-
Use route to make a network request, parse [location.search](https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search), etc. This event is fired when a new route is matched.
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`.
0 commit comments