Skip to content

Commit ec471f8

Browse files
committed
Update Glossary
1 parent 4a03ed0 commit ec471f8

File tree

1 file changed

+60
-16
lines changed

1 file changed

+60
-16
lines changed

docs/Glossary.md

Lines changed: 60 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,14 @@ A *component* is a React component class or a string (e.g. "div"). Basically, it
2020

2121
### EnterHook
2222

23-
type EnterHook = (nextState: RoutingState, redirectTo: RedirectFunction, callback?: Function) => any;
23+
type EnterHook = (nextState: RouterState, redirectTo: RedirectFunction, callback?: Function) => any;
2424

25-
An *enter hook* is a user-defined function that is called when a route is about to be rendered. It receives the next [routing state](#routingstate) as its first argument. The [`redirectTo` function](#redirectfunction) may be used to trigger a transition to a different URL.
25+
An *enter hook* is a user-defined function that is called when a route is about to be rendered. It receives the next [router state](#routerstate) as its first argument. The [`redirectTo` function](#redirectfunction) may be used to trigger a transition to a different URL.
2626

2727
If an enter hook needs to execute asynchronously, it may list a 3rd `callback` argument that it must call in order to cause the transition to proceed.
2828

2929
**Caution:** Using the `callback` in an enter hook causes the transition to wait until it is called. **This can lead to a non-responsive UI if you don't call it very quickly**.
3030

31-
### History
32-
3331
### LeaveHook
3432

3533
type LeaveHook = () => any;
@@ -44,7 +42,7 @@ A *leave hook* is a user-defined function that is called when a route is about t
4442
query: Query;
4543
state: LocationState;
4644
action: Action;
47-
key: string;
45+
key: LocationKey;
4846
};
4947

5048
A *location* answers two important (philosophical) questions:
@@ -54,9 +52,15 @@ A *location* answers two important (philosophical) questions:
5452

5553
New locations are typically created each time the URL changes. You can read more about locations in [the `history` docs](https://github.com/rackt/history/blob/master/docs/Location.md).
5654

55+
### LocationKey
56+
57+
type LocationKey = string;
58+
59+
A *location key* is a string that is unique to a particular [`location`](#location). It is the one piece of data that most accurately answers the question "Where am I?".
60+
5761
### LocationState
5862

59-
type LocationState = any;
63+
type LocationState = ?Object;
6064

6165
A *location state* is an arbitrary object of data associated with a particular [`location`](#location). This is basically a way to tie extra state to a location that is not contained in the URL.
6266

@@ -65,6 +69,12 @@ This type gets its name from the first argument to HTML5's [`pushState`][pushSta
6569
[pushState]: https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method
6670
[replaceState]: https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method
6771

72+
### Path
73+
74+
type Path = Pathname + QueryString;
75+
76+
A *path* represents a URL path.
77+
6878
### Pathname
6979

7080
type Pathname = string;
@@ -91,10 +101,29 @@ The word *params* refers to an object of key/value pairs that were parsed out of
91101

92102
### RedirectFunction
93103

94-
type RedirectFunction = (pathname: Pathname, query: ?Query, state: ?LocationState) => void;
104+
type RedirectFunction = (pathname: Pathname | Path, query: ?Query, state: ?LocationState) => void;
95105

96106
A *redirect function* is used in [`onEnter` hooks](#enterhook) to trigger a transition to a new URL.
97107

108+
### Route
109+
110+
type Route = {
111+
component: Component;
112+
path: ?RoutePattern;
113+
onEnter: ?EnterHook;
114+
onLeave: ?LeaveHook;
115+
};
116+
117+
A *route* specifies a [component](#component) that is part of the user interface (UI). Routes should be nested in a tree-like structure that follows the hierarchy of your components.
118+
119+
It may help to think of a route as an "entry point" into your UI. You don't need a route for every component in your component hierarchy, only for those places where your UI differs based on the URL.
120+
121+
### RouteConfig
122+
123+
type RouteConfig = Array<Route>;
124+
125+
A *route config* is an array of [route](#route)s that specifies the order in which routes should be tried when the router attempts to match a URL.
126+
98127
### RoutePattern
99128

100129
type RoutePattern = string;
@@ -107,25 +136,40 @@ A *route pattern* (or "path") is a string that describes a portion of a URL. Pat
107136

108137
Route patterns are relative to the pattern of the parent route unless they begin with a `/`, in which case they begin matching at the beginning of the URL.
109138

110-
### Route
139+
### Router
111140

112-
type Route = {
113-
path: RoutePattern;
114-
component: Component;
115-
onEnter: EnterHook;
116-
onLeave: LeaveHook;
141+
type Router = {
142+
transitionTo: (location: Location) => void;
143+
pushState: (state: ?LocationState, pathname: Pathname | Path, query?: Query) => void;
144+
replaceState: (state: ?LocationState, pathname: Pathname | Path, query?: Query) => void;
145+
go(n: Number) => void;
146+
listen(listener: RouterListener) => Function;
147+
match(location: Location, callback: RouterListener) => void;
117148
};
118149

119-
### RoutingState
150+
A *router* is a [`history`](http://rackt.github.io/history) object (akin to `window.history` in web browsers) that is used to modify and listen for changes to the URL.
151+
152+
There are two primary interfaces for computing a router's next [state](#routerstate):
153+
154+
- `history.listen` is to be used in stateful environments (such as web browsers) that need to update the UI over a period of time. This method immediately invokes its `listener` argument once and returns a function that must be called to stop listening for changes
155+
- `history.match` is a pure function that does not update the history's internal state. This makes it ideal for server-side environments where many requests must be handled concurrently
156+
157+
### RouterListener
158+
159+
type RouterListener = (error: ?Error, nextState: RouterState) => void;
160+
161+
A *router listener* is a function that is used to listen for changes to a [router](#router)'s [state](#routerstate).
162+
163+
### RouterState
120164

121-
type RoutingState = {
165+
type RouterState = {
122166
location: Location;
123167
routes: Array<Route>;
124168
params: Params;
125169
components: Array<Component>;
126170
};
127171

128-
A *routing state* represents the current state of a router. It contains:
172+
A *router state* represents the current state of a router. It contains:
129173

130174
- the current [`location`](#location),
131175
- an array of [`routes`](#route) that match that location,

0 commit comments

Comments
 (0)