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
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.
26
26
27
27
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.
28
28
29
29
**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**.
30
30
31
-
### History
32
-
33
31
### LeaveHook
34
32
35
33
type LeaveHook = () => any;
@@ -44,7 +42,7 @@ A *leave hook* is a user-defined function that is called when a route is about t
44
42
query: Query;
45
43
state: LocationState;
46
44
action: Action;
47
-
key: string;
45
+
key: LocationKey;
48
46
};
49
47
50
48
A *location* answers two important (philosophical) questions:
@@ -54,9 +52,15 @@ A *location* answers two important (philosophical) questions:
54
52
55
53
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).
56
54
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
+
57
61
### LocationState
58
62
59
-
type LocationState = any;
63
+
type LocationState = ?Object;
60
64
61
65
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.
62
66
@@ -65,6 +69,12 @@ This type gets its name from the first argument to HTML5's [`pushState`][pushSta
A *redirect function* is used in [`onEnter` hooks](#enterhook) to trigger a transition to a new URL.
97
107
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
+
98
127
### RoutePattern
99
128
100
129
type RoutePattern = string;
@@ -107,25 +136,40 @@ A *route pattern* (or "path") is a string that describes a portion of a URL. Pat
107
136
108
137
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.
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
120
164
121
-
type RoutingState = {
165
+
type RouterState = {
122
166
location: Location;
123
167
routes: Array<Route>;
124
168
params: Params;
125
169
components: Array<Component>;
126
170
};
127
171
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:
129
173
130
174
- the current [`location`](#location),
131
175
- an array of [`routes`](#route) that match that location,
0 commit comments