реагировать только на маршрутизатор, отображающий первый маршрут

Question

Я использую тэг-переключатель для маршрутизации различных маршрутов

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

, но при этом загружается только первый компонент для пути / и / home, также загружается страница входа, ничего не происходит, и компонент домашней страницы не загружается по пути / home!

Я пытался использовать тег маршрутизатора браузера перед переключением, пытался сначала загрузить домашнюю страницу, также загружаются только компоненты домашней страницы

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;

ожидается

посещение / загрузка страницы входа

посещение / дом загрузки домашней страницы

Answer 1

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;

импортируйте роутер и добавьте его!

Answer 2

Вы делаете правильно, но орфография неверна, exact (правильно) => extact (вы используете)