React Router wird nicht aktualisiert View

Question

Ich fange an, mit React zu arbeiten, und ich habe ein Problem zu verstehen, wie man react-router funktioniert.

In meinem Projekt habe ich eine App.js-Datei erstellt, die eine einfache Render Funktion exportiert:

export default class App extends React.Component { 
    render() { 
     return <Router> 
      <div> 
       <Link to="/connected">Login</Link> 
       <Link to="/">Home</Link> 

       <Route path="/connected" component={Connected}/> 
       <Route exact path="/" component={LoginPage}/> 

      </div> 
     </Router> 
    } 
} 

Natürlich am Anfang der Datei, ich importieren zwei Komponenten: Connected und LoginPage und ein paar andere Komponenten:

import React from 'react' 

import { 
    HashRouter as Router, 
    Route, 
    Link 
} from 'react-router-dom' 

import LoginPage from './pages/LoginPage' 
import Connected from './pages/Connected' 

Meine Komponenten sind ganz einfach:

import React from 'react' 

export default class LoginPage extends React.Component { 

    render() { 
     return <div> 
      Hello World 1 
     </div> 
    } 
} 

Und so ziemlich das gleiche für die zweite Komponente.

Mein Problem ist:

Wenn ich auf einem <Link to="/">Home</Link> klicken, wird die Seite nicht mit der LoginPage Komponente aktualisiert. Aber wenn ich die Seite aktualisiere, erscheint die LoginPage Komponente. Wenn ich auf <Link to="/connected">Login</Link> klicke, aktualisiert der Router die Seite nicht und ich muss auch die Seite vollständig aktualisieren, um die richtige Komponente anzuzeigen.

Was mache ich falsch? Welche anderen Informationen benötigen Sie, um mir bei der Lösung meines Problems zu helfen?

Answer 1

Kopieren Sie diesen in 'Package.json'> 'Abhängigkeiten': "react-router": "^2.4.0",

Dann tun npm install

Sobald dies geschehen:

Versuchen Sie folgendes:

Erste Komponente (Routen, es ist App.jsx) (Vielleicht müssen Sie Routen von Importen ändern)

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, browserHistory, Redirect } from 'react-router'; 

import LoginPage from './pages/LoginPage' 
import Connected from './pages/Connected' 

ReactDOM.render(
    <Router history={browserHistory}> 
     <Route path="/" component={LoginPage}/> 
     <Route path="/connected" component={Connected}/> 
    </Router> 
    , document.getElementById('root') 
); 

Zweite Komponente (Home):

import React from 'react'; 
import { Link } from 'react-router'; 

export default class Home extends React.Component { 
    render() { 
     return(
      <div> 
       <h1> This is HomePage </h1> 
       <h3> Click to go HomePage </h3> 
       <Link to="/">Home</Link> 
       <h3> Click to go Connected </h3> 
       <Link to="/connected">Connected</Link> 
      </div> 
     ) 
    } 
} 

Dritte Komponente (Connected):

import React from 'react'; 
import { Link } from 'react-router'; 

export default class Connected extends React.Component { 
    render() { 
     return(
      <div> 
       <h1> This is ConnectedPage </h1> 
       <h3> Click to go HomePage </h3> 
       <Link to="/">Home</Link> 
       <h3> Click to go Connected </h3> 
       <Link to="/connected">Connected</Link> 
      </div> 
     ) 
    } 
}