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: README.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
@@ -6,7 +6,7 @@ React Router is a complete routing library for [React](https://facebook.github.i
6
6
7
7
React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.
8
8
9
-
[![Coveralls][coveralls-badge]][coveralls]
9
+
[![Codecov][codecov-badge]][codecov]
10
10
[![Discord][discord-badge]][discord]
11
11
12
12
> **Important:***This is the `next` branch of React Router and may contain changes that are not yet released. To see the code for stable releases, browse [the `master` branch](https://github.com/reactjs/react-router/tree/master).*
@@ -39,7 +39,7 @@ Using [npm](https://www.npmjs.com/):
39
39
40
40
Then with a module bundler like [webpack](https://webpack.github.io/) that supports either CommonJS or ES2015 modules, use as you would anything else:
41
41
42
-
```js
42
+
```jsx
43
43
// using an ES6 transpiler, like babel
44
44
import { Router, Route, Link } from'react-router'
45
45
@@ -59,7 +59,7 @@ You can find the library on `window.ReactRouter`.
When the router is ready to render a branch of route components, it will use this function to create the elements. You may want to take control of creating the elements when you're using some sort of data abstraction, like setting up subscriptions to stores, or passing in some sort of application module to each component via props.
56
56
57
-
```js
57
+
```jsx
58
58
<Router createElement={createElement} />
59
59
60
60
// default behavior
@@ -123,7 +123,7 @@ You can also pass props you'd like to be on the `<a>` such as a `title`, `id`, `
123
123
#### Example
124
124
Given a route like `<Route path="/users/:userId" />`:
// becomes one of these depending on your History and if the route is
129
129
// active
@@ -155,7 +155,7 @@ Contains data and methods relevant to routing. Most useful for imperatively tran
155
155
##### `push(pathOrLoc)`
156
156
Transitions to a new URL, adding a new entry in the browser history.
157
157
158
-
```js
158
+
```jsx
159
159
router.push('/users/12')
160
160
161
161
// or with a location descriptor object
@@ -225,7 +225,7 @@ If left undefined, the router will try to match the child routes.
225
225
A single component to be rendered when the route matches the URL. It can
226
226
be rendered by the parent route component with `this.props.children`.
227
227
228
-
```js
228
+
```jsx
229
229
constroutes= (
230
230
<Route component={App}>
231
231
<Route path="groups" component={Groups} />
@@ -248,7 +248,7 @@ class App extends React.Component {
248
248
##### `components`
249
249
Routes can define one or more named components as an object of `[name]: component` pairs to be rendered when the path matches the URL. They can be rendered by the parent route component with `this.props[name]`.
250
250
251
-
```js
251
+
```jsx
252
252
// Think of it outside the context of the router - if you had pluggable
253
253
// portions of your `render`, you might do it like this:
@@ -372,7 +372,7 @@ Same as `childRoutes` but asynchronous and receives `partialNextState`. Useful f
372
372
###### `callback` signature
373
373
`cb(err, routesArray)`
374
374
375
-
```js
375
+
```jsx
376
376
let myRoute = {
377
377
path:'course/:courseId',
378
378
childRoutes: [
@@ -419,7 +419,7 @@ Same as `indexRoute`, but asynchronous and receives `partialNextState`. As with
419
419
###### `callback` signature
420
420
`cb(err, route)`
421
421
422
-
```js
422
+
```jsx
423
423
// For example:
424
424
let myIndexRoute = {
425
425
component: MyIndex
@@ -455,7 +455,7 @@ The path you want to redirect to.
455
455
##### `query`
456
456
By default, the query parameters will just pass through but you can specify them if you need to.
457
457
458
-
```js
458
+
```jsx
459
459
// Say we want to change from `/profile/123` to `/about/123`
460
460
// and redirect `/get-in-touch` to `/contact`
461
461
<Route component={App}>
@@ -467,7 +467,7 @@ By default, the query parameters will just pass through but you can specify them
467
467
468
468
Note that the `<Redirect>` can be placed anywhere in the route hierarchy, though [normal precedence](/docs/guides/RouteMatching.md#precedence) rules apply. If you'd prefer the redirects to be next to their respective routes, the `from` path will match the same as a regular route `path`.
469
469
470
-
```js
470
+
```jsx
471
471
<Route path="course/:courseId">
472
472
<Route path="dashboard"/>
473
473
{/* /course/123/home -> /course/123/dashboard */}
@@ -521,7 +521,7 @@ A subset of `this.props.params` that were directly specified in this component's
521
521
The matched child route element to be rendered. If the route has [named components](/docs/API.md#named-components) then this will be undefined, and the components will instead be available as direct properties on `this.props`.
522
522
523
523
##### Example
524
-
```js
524
+
```jsx
525
525
render((
526
526
<Router>
527
527
<Route path="/" component={App}>
@@ -547,7 +547,7 @@ class App extends React.Component {
547
547
When a route has one or more named components, the child elements are available by name on `this.props`. In this case `this.props.children` will be undefined. All route components can participate in the nesting.
Copy file name to clipboardExpand all lines: docs/Glossary.md
+20-20Lines changed: 20 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -27,7 +27,7 @@ This is a glossary of common terms used in the React Router codebase and documen
27
27
28
28
## Action
29
29
30
-
```js
30
+
```jsx
31
31
type Action ='PUSH'|'REPLACE'|'POP';
32
32
```
33
33
@@ -39,15 +39,15 @@ An *action* describes the type of change to a URL. Possible values are:
39
39
40
40
## Component
41
41
42
-
```js
42
+
```jsx
43
43
type Component = ReactClass | string;
44
44
```
45
45
46
46
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).
47
47
48
48
## EnterHook
49
49
50
-
```js
50
+
```jsx
51
51
type EnterHook= (nextState:RouterState, replace:RedirectFunction, callback?:Function) => any;
52
52
```
53
53
@@ -65,15 +65,15 @@ A *hash* is a string that represents the hash portion of the URL. It is synonymo
65
65
66
66
## LeaveHook
67
67
68
-
```js
68
+
```jsx
69
69
type LeaveHook= (prevState:RouterState) => any;
70
70
```
71
71
72
72
A *leave hook* is a user-defined function that is called when a route is about to be unmounted. It receives the previous [router state](#routerstate) as its first argument.
73
73
74
74
## Location
75
75
76
-
```js
76
+
```jsx
77
77
type Location= {
78
78
pathname: Pathname;
79
79
search: QueryString;
@@ -108,15 +108,15 @@ You can read more about location descriptors in [the `history` docs](https://git
108
108
109
109
## LocationKey
110
110
111
-
```js
111
+
```jsx
112
112
type LocationKey = string;
113
113
```
114
114
115
115
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?".
116
116
117
117
## LocationState
118
118
119
-
```js
119
+
```jsx
120
120
type LocationState =?Object;
121
121
```
122
122
@@ -129,55 +129,55 @@ This type gets its name from the first argument to HTML5's [`pushState`][pushSta
129
129
130
130
## Params
131
131
132
-
```js
132
+
```jsx
133
133
type Params =Object;
134
134
```
135
135
136
136
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.
137
137
138
138
## Path
139
139
140
-
```js
140
+
```jsx
141
141
type Path = Pathname + QueryString + Hash;
142
142
```
143
143
144
144
A *path* represents a URL path.
145
145
146
146
## Pathname
147
147
148
-
```js
148
+
```jsx
149
149
type Pathname = string;
150
150
```
151
151
152
152
A *pathname* is the portion of a URL that describes a hierarchical path, including the preceding `/`. 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.
153
153
154
154
## Query
155
155
156
-
```js
156
+
```jsx
157
157
type Query = Object;
158
158
```
159
159
160
160
A*query* is the parsed version of a [query string](#querystring).
161
161
162
162
## QueryString
163
163
164
-
```js
164
+
```jsx
165
165
type QueryString = string;
166
166
```
167
167
168
168
A*query string* is the portion of the URL that follows the [pathname](#pathname), including any preceding `?`. 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.
A*redirect function* is used in [`onEnter` hooks](#enterhook) to trigger a transition to a new URL.
177
177
178
178
## Route
179
179
180
-
```js
180
+
```jsx
181
181
type Route = {
182
182
component: RouteComponent;
183
183
path:?RoutePattern;
@@ -192,7 +192,7 @@ It may help to think of a route as an "entry point" into your UI. You don't need
192
192
193
193
## RouteComponent
194
194
195
-
```js
195
+
```jsx
196
196
type RouteComponent = Component;
197
197
```
198
198
@@ -208,23 +208,23 @@ Route components should generally be component classes rather than strings. This
208
208
209
209
## RouteConfig
210
210
211
-
```js
211
+
```jsx
212
212
type RouteConfig =Array<Route>;
213
213
```
214
214
215
215
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.
216
216
217
217
## RouteHook
218
218
219
-
```js
219
+
```jsx
220
220
type RouteHook= (nextLocation?:Location) => any;
221
221
```
222
222
223
223
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 `returnfalse` 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.
224
224
225
225
## RoutePattern
226
226
227
-
```js
227
+
```jsx
228
228
type RoutePattern = string;
229
229
```
230
230
@@ -239,7 +239,7 @@ Route patterns are relative to the pattern of the parent route unless they begin
239
239
240
240
## Router
241
241
242
-
```js
242
+
```jsx
243
243
type Router = {
244
244
push(location: LocationDescriptor) =>void;
245
245
replace(location: LocationDescriptor) =>void;
@@ -255,7 +255,7 @@ A *router* object allows for procedural manipulation of the routing state.
0 commit comments