Skip to content

Commit 70a6472

Browse files
author
Richard Herrera
committed
Document getIndexRoute
1 parent a799a48 commit 70a6472

File tree

2 files changed

+21
-2
lines changed

2 files changed

+21
-2
lines changed

docs/API.md

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ A function used to convert an object from [`Link`](#link)s or calls to
6868
A function used to convert a query string into an object that gets passed to route component props.
6969

7070
##### `onError(error)`
71-
While the router is matching, errors may bubble up, here is your opportunity to catch and deal with them. Typically these will come from async features like [`route.getComponents`](#getcomponentscallback) and [`route.getChildRoutes`](#getchildrouteslocation-callback).
71+
While the router is matching, errors may bubble up, here is your opportunity to catch and deal with them. Typically these will come from async features like [`route.getComponents`](#getcomponentscallback), [`route.getIndexRoute`](#getindexroutecallback), and [`route.getChildRoutes`](#getchildrouteslocation-callback).
7272

7373
##### `onUpdate()`
7474
Called whenever the router updates its state in response to URL changes.
@@ -360,6 +360,19 @@ Please see the [Index Routes guide](/docs/guides/basics/IndexRoutes.md).
360360
#### Props
361361
All the same props as [Route](#route) except for `path`.
362362

363+
##### `getIndexRoute(location, callback)`
364+
Same as `IndexRoute` but asynchronous, useful for
365+
code-splitting.
366+
367+
###### `callback` signature
368+
`cb(err, component)`
369+
370+
```js
371+
<Route path="courses/:courseId" getIndexRoute={(location, cb) => {
372+
// do asynchronous stuff to find the index route
373+
cb(null, Index)
374+
}}/>
375+
```
363376

364377

365378
## IndexRedirect

docs/guides/advanced/DynamicRouting.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ A router is the perfect place to handle code splitting: it's responsible for set
1010

1111
React Router does all of its [path matching](/docs/guides/basics/RouteMatching.md) and component fetching asynchronously, which allows you to not only load up the components lazily, *but also lazily load the route configuration*. You really only need one route definition in your initial bundle, the router can resolve the rest on demand.
1212

13-
Routes may define [`getChildRoutes`](/docs/API.md#getchildrouteslocation-callback) and [`getComponents`](/docs/API.md#getcomponentslocation-callback) methods. These are asynchronous and only called when needed. We call it "gradual matching". React Router will gradually match the URL and fetch only the amount of route configuration and components it needs to match the URL and render.
13+
Routes may define [`getChildRoutes`](/docs/API.md#getchildrouteslocation-callback), [`getIndexRoute`](/docs/API.md#getindexroutelocation-callback), and [`getComponents`](/docs/API.md#getcomponentslocation-callback) methods. These are asynchronous and only called when needed. We call it "gradual matching". React Router will gradually match the URL and fetch only the amount of route configuration and components it needs to match the URL and render.
1414

1515
Coupled with a smart code splitting tool like [webpack](http://webpack.github.io/), a once tireless architecture is now simple and declarative.
1616

@@ -28,6 +28,12 @@ const CourseRoute = {
2828
})
2929
},
3030

31+
getIndexRoute(location, callback) {
32+
require.ensure([], function (require) {
33+
callback(null, require('./components/Index'))
34+
})
35+
},
36+
3137
getComponents(location, callback) {
3238
require.ensure([], function (require) {
3339
callback(null, require('./components/Course'))

0 commit comments

Comments
 (0)