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
Copy file name to clipboardExpand all lines: docs/ConfirmingNavigation.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
##Confirming Navigation
1
+
# Confirming Navigation
2
2
3
3
React Router provides a [`routerWillLeave` lifecycle hook](Glossary.md#routehook) that React [component](Glossary.md#component)s may use to prevent a transition from happening or to prompt the user before leaving a [route](Glossary.md#route). `routerWillLeave` may either 1) `return false` to cancel the transition or 2) `return` a prompt message that will prompt the user for confirmation before leaving the route.
4
4
@@ -12,7 +12,7 @@ var Home = React.createClass({
12
12
// Assuming Home is a route component, it may use the
13
13
// Lifecycle mixin to get a routerWillLeave method.
14
14
mixins: [ Lifecycle ],
15
-
15
+
16
16
routerWillLeave(nextLocation) {
17
17
if (!this.state.isSaved)
18
18
return'Your work is not saved! Are you sure you want to leave?';
Copy file name to clipboardExpand all lines: docs/DynamicRouting.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
##Dynamic Routing
1
+
# Dynamic Routing
2
2
3
3
React Router is great for small sites like [React.js Training](https://reactjs-training.com) ("React Router brought to you by ...") but it's built with websites like [Facebook](https://www.facebook.com/) and [Twitter](https://twitter.com/) in mind, too.
Copy file name to clipboardExpand all lines: docs/Glossary.md
+22-22Lines changed: 22 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,8 @@
1
-
##Glossary
1
+
# Glossary
2
2
3
3
This is a glossary of common terms used in the React Router codebase and documentation listed in alphabetical order, along with their [type signatures](http://flowtype.org/docs/quick-reference.html).
4
4
5
-
###Action
5
+
## Action
6
6
7
7
type Action = 'PUSH' | 'REPLACE' | 'POP';
8
8
@@ -12,13 +12,13 @@ An *action* describes the type of change to a URL. Possible values are:
12
12
-`REPLACE` – indicates the current item in history was altered
13
13
-`POP` – indicates there is a new current item, i.e. the "current pointer" changed
14
14
15
-
###Component
15
+
## Component
16
16
17
17
type Component = ReactClass | string;
18
18
19
19
A *component* is a React component class or a string (e.g. "div"). Basically, it's anything that can be used as the first argument to [`React.createElement`](https://facebook.github.io/react/docs/top-level-api.html#react.createelement).
@@ -28,13 +28,13 @@ If an enter hook needs to execute asynchronously, it may list a 3rd `callback` a
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
-
###LeaveHook
31
+
## LeaveHook
32
32
33
33
type LeaveHook = () => any;
34
34
35
35
A *leave hook* is a user-defined function that is called when a route is about to be unmounted.
36
36
37
-
###Location
37
+
## Location
38
38
39
39
type Location = {
40
40
pathname: Pathname;
@@ -52,13 +52,13 @@ A *location* answers two important (philosophical) questions:
52
52
53
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).
54
54
55
-
###LocationKey
55
+
## LocationKey
56
56
57
57
type LocationKey = string;
58
58
59
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
60
61
-
###LocationState
61
+
## LocationState
62
62
63
63
type LocationState = ?Object;
64
64
@@ -69,43 +69,43 @@ This type gets its name from the first argument to HTML5's [`pushState`][pushSta
A *pathname* is the portion of a URL that describes a hierarchical path, including the preceeding `/`. For example, in `http://example.com/the/path?the=query`, `/the/path` is the pathname. It is synonymous with `window.location.pathname` in web browsers.
83
83
84
-
###QueryString
84
+
## QueryString
85
85
86
86
type QueryString = string;
87
87
88
88
A *query string* is the portion of the URL that follows the [pathname](#pathname), including any preceeding `?`. For example, in `http://example.com/the/path?the=query`, `?the=query` is the query string. It is synonymous with `window.location.search` in web browsers.
89
89
90
-
###Query
90
+
## Query
91
91
92
92
type Query = Object;
93
93
94
94
A *query* is the parsed version of a [query string](#querystring).
95
95
96
-
###Params
96
+
## Params
97
97
98
98
type Params = Object;
99
99
100
100
The word *params* refers to an object of key/value pairs that were parsed out of the original URL's [pathname](#pathname). The values of this object are typically strings, unless there is more than one param with the same name in which case the value is an array.
A *redirect function* is used in [`onEnter` hooks](#enterhook) to trigger a transition to a new URL.
107
107
108
-
###Route
108
+
## Route
109
109
110
110
type Route = {
111
111
component: RouteComponent;
@@ -118,7 +118,7 @@ A *route* specifies a [component](#component) that is part of the user interface
118
118
119
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
120
121
-
###RouteComponent
121
+
## RouteComponent
122
122
123
123
type RouteComponent = Component;
124
124
@@ -130,19 +130,19 @@ The term *route component* refers to a [component](#component) that is directly
130
130
-`route` – The [route](#route) that declared this component
131
131
-`routeParams` – A subset of the [params](#params) that were specified in the route's [`path`](#routepattern)
132
132
133
-
###RouteConfig
133
+
## RouteConfig
134
134
135
135
type RouteConfig = Array<Route>;
136
136
137
137
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.
138
138
139
-
###RouteHook
139
+
## RouteHook
140
140
141
141
type RouteHook = (nextLocation?: Location) => any;
142
142
143
143
A *route hook* is a function that is used to prevent the user from leaving a route. On normal transitions, it receives the next [location](#location) as an argument and must either `return false` to cancel the transition or `return` a prompt message to show the user. When invoked during the `beforeunload` event in web browsers, it does not receive any arguments and must `return` a prompt message to cancel the transition.
144
144
145
-
###RoutePattern
145
+
## RoutePattern
146
146
147
147
type RoutePattern = string;
148
148
@@ -154,7 +154,7 @@ A *route pattern* (or "path") is a string that describes a portion of a URL. Pat
154
154
155
155
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.
156
156
157
-
###Router
157
+
## Router
158
158
159
159
type Router = {
160
160
transitionTo: (location: Location) => void;
@@ -172,13 +172,13 @@ There are two primary interfaces for computing a router's next [state](#routerst
172
172
-`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
173
173
-`history.match` is a pure asynchronous 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
174
174
175
-
###RouterListener
175
+
## RouterListener
176
176
177
177
type RouterListener = (error: ?Error, nextState: RouterState) => void;
178
178
179
179
A *router listener* is a function that is used to listen for changes to a [router](#router)'s [state](#routerstate).
Copy file name to clipboardExpand all lines: docs/Introduction.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,8 @@
1
-
##Introduction
1
+
# Introduction
2
2
3
3
To illustrate the problems React Router is going to solve for you, let's build a small application without it.
4
4
5
-
###Without React Router
5
+
## Without React Router
6
6
7
7
```js
8
8
var About =React.createClass({/*...*/});
@@ -92,7 +92,7 @@ path: /inbox
92
92
93
93
We'd have to make our URL parsing a lot smarter, and we would end up with a lot of code to figure out which branch of nested components to be rendered at any given URL: `App -> About`, `App -> Inbox -> Messages -> Message`, `App -> Inbox -> Messages -> Stats`, etc.
Alright, now we're ready to nest the inbox messages inside the inbox UI.
156
156
@@ -189,7 +189,7 @@ React.render((
189
189
190
190
Now visits to URLs like `inbox/messages/Jkei3c32` will match the new route and nest the UI branch of `App -> Inbox -> Message`.
191
191
192
-
###Getting URL Parameters
192
+
## Getting URL Parameters
193
193
194
194
We're going to need to know something about the message in order to fetch it from the server. Route components get some useful properties injected into them when you render, particularly the parameters from the dynamic segment of your path. In our case, `:id`.
0 commit comments