title: reactjs router - setup a login page
body: <p>I'm trying to make a login page that would work as entry page for my app, and after user would input login and password, it would open main component with menu and content of the pages.</p>
  
  <p>the problem that I can'r understand how to setup a router, or main app structure so it would work as I want. So far I can display a login component with main menu bar at the same time, or just a login page without working pages.</p>
  
  <p>there is my router </p>
  
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom' 
  import {Router, Route, IndexRoute, hashHistory} from 'react-router'
  import App from './App'
  import LoginPage from './pages/login'
  import Forms from './pages/Forms'
  import Home from './pages/Home'
  
  ReactDOM.render(
    &lt;Router history={hashHistory}&gt;
      &lt;Route path ="/" component={App}&gt;
        &lt;IndexRoute component={LoginPage} /&gt;
        &lt;Route exact path='/LoginPage' component={LoginPage} /&gt;
        &lt;Route exact path='/App' component={App} /&gt;
        &lt;Route exact path='/Home' component={Home} /&gt;
        &lt;Route exact path='/Forms' component={Forms} /&gt;
      &lt;/Route&gt;   
    &lt;/Router&gt;, document.getElementById('root'))
  </code></pre>
  
  <p>my login page </p>
  
  <pre><code>import React, { Component } from 'react'
  import { Link } from "react-router"
  import logo from './logo.jpg';
  
  export default class LoginPage extends Component {
    render() {
      return (
          &lt;div className="login-page"&gt;
              &lt;div className="login-form-cont"&gt;
                  &lt;div style={{paddingBottom:'10px'}}&gt; &lt;img src={logo} width="270" height="54" /&gt; &lt;/div&gt;
                  &lt;form className="login-form"&gt;
                      &lt;input type="text" placeholder="username"/&gt;
                      &lt;input type="password" placeholder="password"/&gt;
                      &lt;Link to={`/Home`}&gt; 
                          &lt;button&gt; login &lt;/button&gt;  
                      &lt;/Link&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
      )
    }
  }
  </code></pre>
  
  <p>and my app.js </p>
  
  <pre><code>import React, { Component } from 'react'
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
  import getMuiTheme from 'material-ui/styles/getMuiTheme'
  import classnames from 'classnames'
  import SideBarMenu from './components/SidebarMenu'
  
  export default class App extends Component {
      constructor(props){
      super(props)
      this.state = {open: false}
    }
  
    render() {
    return (
  
        &lt;MuiThemeProvider muiTheme={muiTheme}&gt;
        &lt;div &gt;
            &lt;SideBarMenu/&gt;
            &lt;div className={classnames('app-content')}&gt;
                { this.props.children }
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;/MuiThemeProvider&gt;
        )
    }
  }
  </code></pre>
  
  <p>I tried to make router to start from login component but in this case even address is changing in a browser window, there was no changes on the screen itself  </p>
  
  <p>I'm using react router 3.2 and react 15.6 </p>