[added] IndexRedirect

Closes remix-run#1966

docs/API.md

@@ -10,7 +10,8 @@
  - [Route](#route)
  - [PlainRoute](#plainroute)
  - [Redirect](#redirect)
- - [IndexRoute](#indexroute) 
+ - [IndexRoute](#indexroute)
+ - [IndexRedirect](#indexredirect)
 
 * [Handler Components](#handler-components)
 
@@ -344,18 +345,32 @@ Note that the `<Redirect>` can be placed anywhere in the route hierarchy, though
 </Route>
 ```
 
+
+
 ## 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 `<IndexLink>` to work.
 
-Please see the [Index Routes guide](/docs/guides/basics/IndexRoutes.md)
+Please see the [Index Routes guide](/docs/guides/basics/IndexRoutes.md).
 
 #### Props
 All the same props as [Route](#route) except for `path`.
 
 
 
+## IndexRedirect
+Index Redirects allow you to redirect from the URL of a parent route to another
+route. They can be used to allow a child route to serve as the default route
+for its parent, while still keeping a distinct URL.
+
+Please see the [Index Routes guide](/docs/guides/basics/IndexRoutes.md).
+
+#### Props
+All the same props as [Redirect](./Redirect.md) except for `from`.
+
+
+
 ## Handler Components
 A route's handler component is rendered when that route matches the URL. The router will inject the following properties into your component when it's rendered:
 

examples/index.html

@@ -13,7 +13,6 @@ <h1>React Router Examples</h1>
 <li><a href="pinterest">Pinterest-style UI (location.state)</a></li>
 <li><a href="nested-animations">Nested Animations</a></li>
 <li><a href="query-params">Query Params</a></li>
-<li><a href="redirect-using-index">Redirect using IndexRoute</a></li>
 <li><a href="shared-root">Shared Root</a></li>
 <li><a href="sidebar">Sidebar</a></li>
 <li><a href="transitions">Transitions</a></li>

modules/IndexRedirect.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import invariant from 'invariant'
+import warning from 'warning'
+import Redirect from './Redirect'
+import { falsy } from './PropTypes'
+
+const { string, object } = React.PropTypes
+
+/**
+ * An <IndexRedirect> is used to redirect from an indexRoute.
+ */
+const IndexRedirect = React.createClass({
+
+ statics: {
+
+ createRouteFromReactElement(element, parentRoute) {
+ if (parentRoute) {
+ parentRoute.indexRoute = Redirect.createRouteFromReactElement(element)
+ } else {
+ warning(
+ false,
+ 'An <IndexRedirect> does not make sense at the root of your route config'
+ )
+ }
+ }
+
+ },
+
+ propTypes: {
+ to: string.isRequired,
+ query: object,
+ state: object,
+ onEnter: falsy,
+ children: falsy
+ },
+
+ render() {
+ invariant(
+ false,
+ '<IndexRedirect> elements are for router configuration only and should not be rendered'
+ )
+ }
+
+})
+
+export default IndexRedirect

modules/__tests__/IndexRedirect-test.js

@@ -0,0 +1,34 @@
+/*eslint-env mocha */
+import expect from 'expect'
+import React from 'react'
+import createHistory from 'history/lib/createMemoryHistory'
+import IndexRedirect from '../IndexRedirect'
+import Router from '../Router'
+import Route from '../Route'
+
+describe('An <IndexRedirect>', function () {
+
+ let node
+ beforeEach(function () {
+ node = document.createElement('div')
+ })
+
+ afterEach(function () {
+ React.unmountComponentAtNode(node)
+ })
+
+ it('works', function (done) {
+ React.render((
+ <Router history={createHistory('/')}>
+ <Route path="/">
+ <IndexRedirect to="/messages" />
+ <Route path="messages" />
+ </Route>
+ </Router>
+ ), node, function () {
+ expect(this.state.location.pathname).toEqual('/messages')
+ done()
+ })
+ })
+
+})

modules/index.js

@@ -4,6 +4,7 @@ export Link from './Link'
 export IndexLink from './IndexLink'
 
 /* components (configuration) */
+export IndexRedirect from './IndexRedirect'
 export IndexRoute from './IndexRoute'
 export Redirect from './Redirect'
 export Route from './Route'