React router render component on same page

Question

im using react router on my project, when i hit the login button, it renders the content of App component, but displays them on the same page. i want to display on new page when i hit login, help me

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 (
      <div className="App">
        <header>
          <h2> Doctor Login Page </h2>
        </header>
        <form>

        <Router history={browserHistory}>
        <Route path="/world" component={App}/>
      </Router>
          <br /><br /><br />
          Username: <input name='email' placeholder='Email' /><br /><br />
          Password: <input name='password' placeholder='Password' type='password' />
          <br /><br />
          <button onClick={() => this.onSubmit()}>Login</button>
        </form>
      </div>
    );
  }
}

export default Login;

Solution 1

It looks like you want to tackle this in either two ways

1) Use the 'exact path' property from the react-router library

<Route exact path="/world" component={App}/>

2) remove the code below the route and put that into a component itself and declare its own route as your code above has the main router running as well as leaving static JSX below the routers.

<Route exact path="/" component={Login}/>
<Route exact path="/world" component={App}/>

Solution 2

Be sure to put the most specific route at the top. React route will scan each route once find a match it will redirect to that route in case you didn't use the 'exact' keyword.

example:

<Route path="/world" component={App}/>
<Route path="/" component={Login}/>

I had this issue before and to reorder of the routes was the solution in case of anyone face this in the future.

Comments

[James Bass Davies]

Best thing to do here is write out the components. Have a navigation component that contains all of your routes right at the top level which then has two routes with two children components below it ( Login & Home )

[Ologho Cyril Paul]

Still not solved is not a diagnosis, what error did you get? how does your code look after the changes?

[James Bass Davies]

Also im not sure whats in your App component - but if thats your parent controlling component try moving your routing into there

[LogaKrishnan]

I modified the create react app, in the app.js i modified to render login component,(the code above i posted belongs to login component), so in my app.js it only contain that homepage of default react app. Now my problem is, when I give local host:3000 it gives me in this order (doctor login page(text),username text box,password box, then login button) Now when I hit login, I'm expecting app component only to be rendered on that page, but what I'm getting is in this order(doctor login page(text),{app component}username text box,password box, then login button)

[LogaKrishnan]

sorry for the mistake, i did not put routes on seperate file, thats why it is executed on same page, now everything works as expected, thank you so much :)