diff --git a/docs/api/IndexRoute.md b/docs/api/IndexRoute.md index 9a06e09ddb..75d2abf238 100644 --- a/docs/api/IndexRoute.md +++ b/docs/api/IndexRoute.md @@ -1 +1,14 @@ -# IndexRoute \ No newline at end of file +# IndexRoute + +Index Routes allow you to provide a default "child" to a parent +route when visitor is at the url of the parent, they provide convention +for `` to work. + +Please see the [Index Routes guide](../basics/IndexRoutes.md) + +### Props + +All the same props as [Route](./Route.md) except for `path`. + + + diff --git a/docs/basics/IndexRoutes.md b/docs/basics/IndexRoutes.md new file mode 100644 index 0000000000..a043f02735 --- /dev/null +++ b/docs/basics/IndexRoutes.md @@ -0,0 +1,48 @@ +# Index Route and Index Links + +## Index Routes + +To illustrate the use case for `IndexRoute`, imagine the following route +config without it: + +```js + + + + + + +``` + +When the user visits `/`, the App component is rendered, but none of the +children are, so `this.props.children` inside of `App` will be undefined. +To render some default UI you could easily do `{this.props.children || +}`. + +But now `Home` can't participate in routing, like the `onEnter` hooks, +etc. You render in the same position as `Accounts` and `Statements`, so +the router allows you have `Home` be a first class route component with +`IndexRoute`. + +```js + + + + + + + +``` + +Now `App` can render `{this.props.children}` and we have a first-class +route for `Home` that can participate in routing. + +## Index Links + +If you were to `Home` in this app, it would always +be active since every url starts with `/`. This is a problem because +we'd like to link to `Home` but only be active if `Home` is rendered. + +To have a link to `/` that is only active when the `Home` route is +rendered, use `Home`. +