Reagieren Router- Verbindung nicht richtig

Question

Ich habe Regie die folgende Komponente ...

import React from 'react'; 
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router' 

class Bottom extends React.Component { 

    constructor(){ 
     super(); 
     this.state = {link:"Don't have an account?"} 
    } 

    render(){ 

     return (
      <div> 
      <div className="sub-login"> 
       <p>{this.state.link}<Link to="/register"> Register here</Link></p> 
      </div> 
      </div> 

     ); 
    } 
} 

export default Bottom; 

Wie Sie kann ich ein <Link> zeigt auf der Seite habe ich möchte der Benutzer gehen, wenn es angeklickt wird.

Diese Komponente wird dann in eine andere Klasse namens <Register /> gebündelt.

Und dann habe ich die folgenden Routen ...

class App extends React.Component { 

    render(){ 

     return (
      <Router history={hashHistory}> 
       <Route path='/' component={Index} > 
        <IndexRoute component={Register} /> 
        <Route path='/register' component={Register} /> 
       </Route> 
      </Router> 
     ); 
    } 
} 

Wenn die Link angeklickt wird, wird die URL Änderungen /register, aber der Inhalt der Seite ist nach wie vor, dass der Homepage, die <Index /> ist Komponente.

Warum zeigt es nicht die <Register /> Komponente? Was muss ich ändern, um die Registerkomponente beim Anklicken der Verknüpfung zu rendern?

Answer 1

Ich erkannte, dass alles, was ich tun musste, war {this.props.children} zu meinem Indexlayout hinzuzufügen. Wenn also auf Link geklickt wird, wird das Register Layout in mein Index Layout geladen.

Der folgende Code funktioniert gemacht ...

render(){ 

    return (
     <div> 
     {this.props.children} <----- 
     <div className="sub-login"> 
      <p>{this.state.link}<Link to="/register"> Register here</Link></p> 
     </div> 
     </div> 

    );