React Login，一旦授权成功，移动到新视图

我在尝试做一些我认为相当简单的事情时遇到了障碍。

我的应用程序是这样布局的:

├── src 
│   ├── background.jpeg 
│   ├── client.js 
│   ├── client.min.js 
│   ├── images.jpeg 
│   ├── index.html 
│   ├── js 
│   │   ├── client.js 
│   │   └── components 
│   │       ├── Footer.js 
│   │       ├── Header.js 
│   │       ├── Layout.js 
│   │       ├── login 
│   │       │   ├── Layout2.js 
│   │       │   └── Login.js 
│   │       └── Main.js

client.js以这种方式加载Layout2组件:

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, IndexRoute, hashHistory } from "react-router";
import Layout2 from "./components/login/Layout2";
import Login  from "./components/login/Login";
const app = document.getElementById('app');
ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Layout2}>
            <IndexRoute component={Login} />
        </Route>
    </Router>,
app);

和Layout2加载Login组件:

import React          from "react";
import Center         from 'react-center';
import Login          from "./Login";
export default class Layout extends React.Component {
    constructor() {
        super();
    }
    render() {
        return (
            <div>
                <Center>
                    <Login>
                    </Login>
                </Center>
            </div>
        );
    }
}

最后登录是

import React from "react";
import linkState from 'react-link-state';
import {Router} from "react-router";
import Layout   from "../Layout.js";
var _ = require('lodash');
var $ = require ('jquery');
export default class Login extends React.Component {
  constructor() {
    super();
    this.state = {
      user: '',
      password: '',
      pin: ''
    }
    this._onEntry = this._onEntry.bind(this);
  }
  render() {
    var styles = _.cloneDeep(this.constructor.styles);
    return (
      <div style={styles.loginPosition}>
        <form role="form">
          <div className="form-group">
            <br /><br />
            <input type="text"      class="form-control" valueLink={linkState(this, 'user')}     placeholder="Username"  onKeyPress={this._onEntry}/> <br />
            <input type="password"  class="form-control" valueLink={linkState(this, 'password')} placeholder="Password"  onKeyPress={this._onEntry}/> <br />
            <input type="password"  class="form-control" valueLink={linkState(this, 'pin')}      placeholder="Pin"       onKeyPress={this._onEntry}/>
          </div>
        </form>
        <br /><br />
      </div>
    );
  }
    _onEntry(e){
        var user    = this.state.user;
        var pass    = this.state.password;
        var pin     = this.state.pin;
        /* Look for the enter key */
        if (e.nativeEvent.keyCode != 13)
            return;
        if( user === "" || pass === ""  || pin === "" )
            return;
        /* Form the message for the backend */
        var message = { user: user, pass: pass, pin: pin, time: new Date() };
        var server = "http://blah/phpsomething.php";
        $.ajax({
            url:        server,
            dataType:   'json',
            type:       'POST',
            data:       message,
            success:    function(data) {
                if( data.status === true ){
                    alert("Access Granted");
                } else if( data.status === false ){
                    alert("Access Denied");
                }
            }.bind(this)
        });
    }
}

我的问题是，一旦我验证了用户凭据，我得到警报("访问授予")，我如何改变到另一个布局?

我必须首先加载登录页面，所以我允许用户有机会进行身份验证，但之后我想加载Main.js组件。

我试过使用this.context.router.push();和窗口。地点等等……但我所做的一切似乎都不起作用，改变到Layout.js，其中有我想从那一点上使用的其他视图。

我肯定我错过了一些简单的东西。