Reactor-Router hat Probleme bei der Anzeige der einzelnen Komponenten

Question

Ich bin auf ReactRouter v4 migriert und es ist nur ein Aufwand für mich. Ich habe eine Datei in app.js, in der ich versuche, ein einfaches Routing-System einzurichten. anstelle der Login-Seite

import React, { Component } from 'react'; 
import { Router, Route, IndexRoute, hashHistory, Redirect } from 'react-router'; 
import LoginPage from './LoginPage'; 
import NavigationBar from './NavigationBar'; 

class App extends Component { 
    render() { 
    return (
     <Router history={history}> 
     <Route exact path='/' component={NavigationBar}></Route> 
     <Route exact path='/login' component={LoginPage}></Route> 
     </Router> 
    ); 
    } 
} 

Der Code sehr gut kompiliert, aber aus irgendeinem Grund auf dem Browser wird die Navigationsleiste angezeigt, wenn die URL localhost: 3000/login

The image of the nagivation bar showing instead of the login

I Die Anmeldung sollte unter/login angezeigt werden und die Navigationsleiste unter/angezeigt werden, stattdessen wird die Navigationsleiste sowohl unter/login als auch/angezeigt. Ich habe die Beispiele auf dem Trainingsleitfaden des React-Routers hier verfolgt und ich kann nicht herausfinden, was ich falsch mache.

Answer 1

Vielleicht ist es nur ein Tippfehler in Ihrem Beitrag hier, aber Sie erweitern Compoent statt Component. Ich nehme an, Sie würden schlimmere Probleme sehen, als die falsche Komponente zu bekommen, wenn das in Ihrem Code passiert.

Ich ziehe BrowserRouter (ich muss nicht Legacy-Browser unterstützen), aber ich habe Code wie folgt arbeiten:

import React, { Component } from 'react'; 
import { Route } from 'react-router'; 
import { HashRouter as Router } from 'react-router-dom'; 

import LoginPage from './LoginPage'; 
import NavigationBar from './NavigationBar'; 

class App extends Component { 
    render() { 
    return (
     <Router> 
     <div> 
      <Route exact path='/' component={NavigationBar}></Route> 
      <Route exact path='/login' component={LoginPage}></Route> 
     </div> 
     </Router> 
    ); 
    } 
} 

Sie werden react-router-dom für diesen Code auszuführen installieren.

Besuch http://localhost:3000/#/login, bekomme ich die Login-Komponente. Wenn Sie HashRouter zu BrowserRouter ändern, können Sie Ihre Komponente unter http://localhost:3000/login Rendern sehen.