title: React router render component on same page
body: <p>im using <code>react router</code> on my project, when i hit the login button, it <code>renders</code> the content of <code>App</code> component, but displays them on the <code>same page</code>. i want to display on <code>new page</code> when i hit <code>login</code>, help me</p>
  
  <pre><code>import React, { Component } from 'react';
  import * as service from '../services/service';
  import '../App.css'
  import '../index.css'
  import App from'../App'
  import { Link, Redirect, Router, Route, browserHistory,IndexRoute } from 'react-router';
  // import createHistory from 'history/createBrowserHistory'
  
  class Login extends Component {
    constructor(props) {
      super(props);
      this.state = {
        messages: []
      }
    }
    onSubmit() {
      browserHistory.push('/world');
      }
    render() {
      const { messages } = this.state;
      return (
        &lt;div className="App"&gt;
          &lt;header&gt;
            &lt;h2&gt; Doctor Login Page &lt;/h2&gt;
          &lt;/header&gt;
          &lt;form&gt;
  
          &lt;Router history={browserHistory}&gt;
          &lt;Route path="/world" component={App}/&gt;
        &lt;/Router&gt;
            &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
            Username: &lt;input name='email' placeholder='Email' /&gt;&lt;br /&gt;&lt;br /&gt;
            Password: &lt;input name='password' placeholder='Password' type='password' /&gt;
            &lt;br /&gt;&lt;br /&gt;
            &lt;button onClick={() =&gt; this.onSubmit()}&gt;Login&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Login;
  </code></pre>