title: React-router - redirect on load?
body: <p>I'm new to React development and I'm not sure how to handle this.</p>
  
  <p>I have a simple app with routes, it looks like this:</p>
  
  <pre><code>&lt;Router&gt;
      &lt;div&gt;
        &lt;Route path="/" component={MainComponent} /&gt;
        &lt;Route path="/dashboard" component={DashboardComponent} /&gt;
        &lt;Route path="/users" component={UsersComponent} /&gt;
        &lt;Route path="/admin" component={AdminComponent} /&gt;
      &lt;/div&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>When I go to localhost:3000/myApp/index.html my <code>MainComponent</code> loads as expected, it holds main layout of the site, navigation and so forth.</p>
  
  <p>Then I have to click on "Dashboard" to switch to <code>DashboardComponent</code>, "Users" to move to <code>UsersComponent</code> and "Admin" to load <code>AdminComponent</code>, these are loaded next to the navigation from <code>MainComponent</code>.</p>
  
  <p>So it goes like this:</p>
  
  <pre><code>localhost:3000/myApp = MainComponent 
  localhost:3000/dashboard = MainComponent + DashboardComponent
  localhost:3000/users = MainComponent + UsersComponent
  localhost:3000/admin = MainComponent + AdminComponent
  </code></pre>
  
  <p>What I want to achieve is to never load <code>MainComponent</code> alone (as it holds nothing excepting navigation), but load DashboardComponent with it, so everything will work as before with a slight change:</p>
  
  <pre><code>localhost:3000/myApp = MainComponent + DashboardComponent
  </code></pre>
  
  <p>So I guess I want to load my MainComponent and then dashboard on init. It'd be very nice if the URL changes automagically from index.html to /dashboard too.</p>
  
  <p>I tried doing something like this in my MainComponent.jsx:</p>
  
  <pre><code>componentWillMount() {
    &lt;Redirect to="/dashboard" /&gt;
    console.log("It works!");
  }
  </code></pre>
  
  <p>But it does nothing, I think the router from first example in Application.jsx just overrides it. </p>
  
  <p>I think I might be doing something wrong because I feel like it's one of the most basic things with router but I can't find any answers and anything in documentation that would help me here. Any hints?</p>
  
  <p>tl;dr I want <code>localhost:3000/myApp/index.html</code> to redirect me <code>localhost:3000/dashboard</code> when app starts (I think it should be enough for router to load what the right component).</p>
  
  <p>Rerouting does nothing (there are no errors, but the route is not changing):</p>
  
  <pre><code>    &lt;Router&gt;
          &lt;div&gt;
            &lt;Route path="/" component={MainComponent} /&gt;
            &lt;Route path="/dashboard" component={DashboardComponent} /&gt;
            &lt;Route path="/users" component={UsersComponent} /&gt;
            &lt;Route path="/admin" component={AdminComponent} /&gt;
            &lt;Route exact path="/" component={ () =&gt; &lt;Redirect to={DashboardComponent} /&gt; } /&gt;
          &lt;/div&gt;
      &lt;/Router&gt;
  </code></pre>