Skip to content

Commit d29067e

Browse files
committed
Add code recipes
1 parent 0b8ec1c commit d29067e

File tree

4 files changed

+44
-52
lines changed

4 files changed

+44
-52
lines changed

CHANGELOG.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ All notable changes to this project will be documented in this file.
1414
import { resolve } from 'universal-router';
1515
resolve(routes, { path, ...context }); // => Promise<any>
1616
```
17-
See #83 for more info and examples
17+
See [#83](https://github.com/kriasoft/universal-router/pull/83) for more info and examples
1818
- `context.next()` now iterates only child routes by default (BREAKING CHANGE)<br>
19-
use `context.next(true)` to iterate through all remaining routes
19+
use `context.next(true)` to iterate through the all remaining routes
2020
- Add support for URL Generation
2121
```js
2222
import generateUrls from 'universal-router/generate-urls';

docs/README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ server-side applications (e.g. Node.js/Express, Koa).
1414
with only single [path-to-regexp](https://github.com/pillarjs/path-to-regexp) dependency
1515
* It can be used with any JavaScript framework such as React, Vue.js etc
1616
* It uses the same middleware approach used in Express and Koa, making it easy to learn
17+
* Routes are plain javascript objects with which you can interact as you like
18+
* Support both imperative and declarative routing style
1719

1820

1921
## How does it look like?
@@ -58,8 +60,8 @@ import Router from 'universal-router/legacy';
5860

5961
## Learn more
6062

61-
* [Getting Started](./getting-started.md)
62-
* [Universal Router API](./api.md)
63+
* [Getting Started](https://github.com/kriasoft/universal-router/blob/master/docs/getting-started.md)
64+
* [Universal Router API](https://github.com/kriasoft/universal-router/blob/master/docs/api.md)
6365

6466

6567
## Backers

docs/api.md

Lines changed: 26 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -8,33 +8,31 @@ title: API ∙ Universal Router
88
## `const router = new Router(routes, options)`
99

1010
Creates an universal router instance which have a single
11-
[`router.resolve()`](##routerresolve-path-context---promiseany) method.
12-
`Router` constructor expects a plain javascript object for the first argument
13-
with any amount of params where only `path` is required or array of such objects.
14-
Second argument is optional or you can pass following:
11+
[`router.resolve()`](#routerresolve-path-context---promiseany) method.
12+
`Router` constructor expects a plain javascript object for the first `routes` argument
13+
with any amount of params where only `path` is required, or array of such objects.
14+
Second `options` argument is optional where you can pass the following:
1515

16-
- `context` - The object with any data which you want to pass through to `resolveRoute` function.<br>
16+
- `context` - The object with any data which you want to pass to `resolveRoute` function.<br>
1717
See [Context](#context) section below for details.
18-
- `baseUrl` - The base URL of the app. Empty string `''` by default.<br>
18+
- `baseUrl` - The base URL of the app. By default is empty string `''`.<br>
1919
If all the URLs in your app are relative to some other "base" URL, use this option.
2020
- `resolveRoute` - The function for any custom route handling logic.<br>
2121
For example you can define this option to work with routes in declarative manner.<br>
22-
By default the router calls `action` methods of matched route if any.
23-
24-
Example:
22+
By default the router calls the `action` function of matched route.
2523

2624
```js
2725
import Router from 'universal-router';
2826

2927
const routes = {
30-
path: '/', // string, required

31-
name: 'home', // unique string, optional
32-
parent: null, // route object or null, optional (filled by router)
33-
children: [], // array of route objects or null, optional

34-
action(context, params) { // function, optional
35-
36-
// method should return anything except `null` or `undefined` to be resolved by router
37-
// otherwise router will throw an error if all matched routes returned nothing
28+
path: '/', // string, required

29+
name: 'home', // unique string, optional
30+
parent: null, // route object or null, automatically filled by the router
31+
children: [], // array of route objects or null, optional

32+
action(context, params) { // function, optional
33+
34+
// action method should return anything except `null` or `undefined` to be resolved by router
35+
// otherwise router will throw `Page not found` error if all matched routes returned nothing
3836
return '<h1>Home Page</h1>';
3937
},
4038
// ...
@@ -58,7 +56,7 @@ const router = new Router(routes, options);
5856
## `router.resolve({ path, ...context })``Promise<any>`
5957

6058
Traverses the list of routes in the order they are defined until it finds the first route that
61-
matches provided URL path string and whose action method returns anything other than `null` or `undefined`.
59+
matches provided URL path string and whose `action` function returns anything other than `null` or `undefined`.
6260

6361
```js
6462
const router = new Router([
@@ -150,8 +148,8 @@ Also check out online [router tester](http://forbeslindesay.github.io/express-ro
150148

151149
## Context
152150

153-
In addition to a URL path string, any arbitrary data can be passed to the router's `resolve()` method,
154-
that becomes available inside action methods.
151+
In addition to a URL path string, any arbitrary data can be passed to the `router.resolve()` method,
152+
that becomes available inside `action` functions.
155153

156154
```js
157155
const router = new Router({
@@ -166,29 +164,17 @@ router.resolve({ path: '/hello', user: 'admin' })
166164
// => Welcome, admin!
167165
```
168166

169-
Router supports `context` option in the constructor
167+
Router supports `context` option in the `Router` constructor
170168
to support for specify of custom context properties only once.
171169

172170
```js
173-
import { createStore } from 'redux';
174-
175-
const route = {
176-
path: '/hello',
177-
action(context) {
178-
const state = context.store.getState();
179-
return `Welcome, ${state.user}!`;
180-
},
181-
};
182-
183171
const context = {
184-
store: createStore({ user: 'admin' }),
172+
store: {},
173+
user: 'admin',
174+
// ...
185175
};
186176

187177
const router = new Router(route, { context });
188-
189-
router.resolve({ path: '/hello' })
190-
.then(result => console.log(result));
191-
// => Welcome, admin!
192178
```
193179

194180
Router always adds following parameters to the `context` object
@@ -199,7 +185,7 @@ before passing it to the `resolveRoute` function:
199185
- `next` - Middleware style function which can continue resolving,
200186
see [Middlewares](#middlewares) section below for details.
201187
- `url` - URL which was transmitted to `router.resolve()`.
202-
- `baseUrl` - Base URL path relative to the current route.
188+
- `baseUrl` - Base URL path relative to the path of the current route.
203189
- `path` - Matched path.
204190
- `params` - Matched path params,
205191
see [URL Parameters](#url-parameters) section above for details.
@@ -274,7 +260,7 @@ router.resolve({ path: '/hello' });
274260
```
275261

276262
Remember that `context.next()` iterates only child routes,
277-
use `context.next(true)` to iterate through all remaining routes.
263+
use `context.next(true)` to iterate through the all remaining routes.
278264

279265

280266
## URL Generation
@@ -289,7 +275,7 @@ In most web applications it's much simpler to just use a string for hyperlinks.
289275
// etc.
290276
```
291277

292-
However for some types of web applications it may be useful to generate URLs dynamically based on route names.
278+
However for some types of web applications it may be useful to generate URLs dynamically based on route name.
293279
That's why this feature is available as an extension `url(routeName, params) ⇒ String`.
294280

295281
```js
@@ -314,7 +300,7 @@ url('home'); // => '/base'
314300
url('hello', { username: 'john' }); // => '/base/hello/john'
315301
```
316302

317-
This approach also works fine for dynamically added routes at runtime:
303+
This approach also works fine for dynamically added routes at runtime.
318304

319305
```js
320306
routes.children.push({ path: '/world', name: 'world' });

docs/getting-started.md

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ by running:
1515
$ npm install universal-router --save
1616
```
1717

18-
This module contains a `router.resolve` method that responsible for traversing the list of routes, until it
19-
finds the first route matching the provided URL path string and whose action method returns anything
20-
other than `null` or `undefined`. Each route is just a plain JavaScript object having `path`, `action`, and
21-
`children` (optional) properties.
18+
This module contains a `Router` class with a single `router.resolve` method that responsible for traversing
19+
the list of routes, until it finds the first route matching the provided URL path string and whose action method
20+
returns anything other than `null` or `undefined`. Each route is just a plain JavaScript object having `path`,
21+
`action`, and `children` (optional) properties.
2222

2323
```js
2424
import Router from 'universal-router';
@@ -40,15 +40,15 @@ router.resolve({ path: '/one' }).then(result => {
4040

4141
## Use with React
4242

43-
```js
43+
```jsx
4444
import React from 'react';
4545
import ReactDOM from 'react-dom';
4646
import Router from 'universal-router';
4747

4848
const routes = [
49-
{ path: '/one', action: () => '<h1>Page One</h1>' },
50-
{ path: '/two', action: () => '<h1>Page Two</h1>' },
51-
{ path: '*', action: () => '<h1>Not Found</h1>' }
49+
{ path: '/one', action: () => <h1>Page One</h1> },
50+
{ path: '/two', action: () => <h1>Page Two</h1> },
51+
{ path: '*', action: () => <h1>Not Found</h1> }
5252
];
5353

5454
const router = new Router(routes);
@@ -58,3 +58,7 @@ router.resolve({ path: '/one' }).then(component => {
5858
// renders: <h1>Page One</h1>
5959
});
6060
```
61+
62+
## Learn more
63+
64+
* [Universal Router API](https://github.com/kriasoft/universal-router/blob/master/docs/api.md)

0 commit comments

Comments
 (0)