CODEWITHSUNDEEP
reactjsreact-router
Viraj Patil
Viraj Patil

Reputation: 35

react router only rendering first route

i am using switch tag for routing different routes

<Switch>
    <Route extact path = "/" component  = {LoginPage} />
    <Route  path = "/home" component= {HomePage} />
</Switch>

but this only loads the first component for path / and /home also load loginpage nothing happens and homepage component does not load on /home path!

i have tried using browser router tag before switch , tried loading Home page first it is also same only homepage component loads

App.js

import React,{ Component } from 'react';
import {BrowserRouter, Switch ,Route} from 'react-router-dom';
import LoginPage from './components/LoginPage';
import HomePage from './components/HomePage';


class App extends  React.Component {

render(){
  return (

    <Switch>

    <Route extact path = "/" component  = {LoginPage} />
    <Route  path = "/home" component= {HomePage} />

    </Switch>

  );
}
}

export default App;

LoginPage.js

import React, {Component} from 'react';
import HomePage from './HomePage';
import Logo from '../image/Logo1.png'
import {Redirect} from 'react-router-dom';
import axios from 'axios';

class LoginPage extends Component{


  render(){

        return(

          <div className='loginWindow'>

            <form >
              <img src={Logo} /><br/>
              <input type="text" onChange = {(event) => this.setState({usrname:event.target.value })}  name="usrname"  placeholder="Username"/><br/>
              <input type="Password" onChange = {(event) => this.setState({usrpass:event.target.value })} name="usrpass"  placeholder="Password"/><br/>
              <input type="button" value="Login" onClick={event=>this.Login(event)}  />
            </form>
          </div>
        );
      }

}

export default LoginPage;

HomePage.js

import React,{Component} from 'react';
import Footer from './Footer/Footer';
import Header from './Header/Header';


class HomePage extends Component{
  render(){
      return(
        <div id="HomePage">
        <Header />
        <h1>hello</h1>
        <Footer />
        </div>
      )
    }
  }

  export default HomePage;

expected

visiting / should load login page

visiting /home should load home page

Upvotes: 2

Views: 4570

Answers (2)

Bhawana
Bhawana

Reputation: 380

You are doing right but spelling is wrong , exact(correct) => extact(you are using)

Upvotes: 3

adel
adel

Reputation: 3507

import React,{ Component } from 'react';
import {BrowserRouter as Router , Switch ,Route} from 'react-router-dom';
import LoginPage from './components/LoginPage';
import HomePage from './components/HomePage';


class App extends  React.Component {

render(){
  return (
<Router>
    <Switch>

    <Route exact path = "/" component  = {LoginPage} />
    <Route  path = "/home" component= {HomePage} />

    </Switch>
    </Router>

  );
}
}

export default App;

import router and add it!

Upvotes: 0

Related Questions