CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-redux
LogaKrishnan
LogaKrishnan

Reputation: 501

React router render component on same page

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;

Upvotes: 4

Views: 15430

Answers (2)

Salma Elshahawy
Salma Elshahawy

Reputation: 1190

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.

Upvotes: 2

James Bass Davies
James Bass Davies

Reputation: 408

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}/>

Upvotes: 7

Related Questions