title: React-router - check for empty state and redirect?
body: <p>How can I check for empty state and redirect to the first route, if needed?</p>
  
  <p>I have my routes.js</p>
  
  <pre><code>export default (
      &lt;Route path="/" component={App}&gt;
          &lt;IndexRoute component={Screen1} /&gt;
          &lt;Route path="/1" component={Screen1} /&gt;;
          &lt;Route path="/2" component={Screen2} /&gt;
          &lt;Route path="/3" component={Screen3} /&gt;
          &lt;Route path="/4" component={Screen4} /&gt;
          &lt;Route path="/5" component={Screen5} /&gt;
          &lt;Route path="/6" component={Screen6} /&gt;
      &lt;/Route&gt;
  );
  </code></pre>
  
  <p>and my index.js</p>
  
  <pre><code>const store = configureStore();
  console.log({ store });
  render(
      &lt;Provider store={store}&gt;
          &lt;Router history={browserHistory} routes={routes} /&gt;
      &lt;/Provider&gt;,
      document.getElementById('root')
  );
  </code></pre>
  
  <p>How would I do that using <code>react-router</code></p>
  
  <p>app.js</p>
  
  <pre><code>import React, { PropTypes } from 'react';
  import Header from './common/Header';
  import ModalRoot from './modals/Modal';
  import Footer from './common/Footer';
  class App extends React.Component {
      render() {
          return (
              &lt;div className="container-fluid"&gt;
                  &lt;ModalRoot /&gt;
                  &lt;Header /&gt;
                  {this.props.children}
                  &lt;Footer /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  App.propTypes = {
      children: PropTypes.object.isRequired,
  };
  
  export default App;
  </code></pre>