La navigazione del router di React non funziona

Question

Ho implementato un'applicazione di test JS reattiva con router di risposta in ES6 ma non sembra funzionare. Il frammento di codice che segue:

app.js 
------- 

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Routes from './routes'; 

ReactDOM.render(Routes, document.getElementById('react-container')); 

routes.js 
--------- 

import React from 'react'; 
import { DefaultRoute, Link, Route, RouteHandler,Router } from 'react-router'; 
import Page1 from './page1'; 
import Home from './home'; 
import { IndexRoute } from 'react-router'; 

let routes = 
    <Router> 
    <Route path="/" component={Home}> 
     <Route path="page1" component={ Page1 }/> 
    </Route> 
    </Router> 

export default routes 

home.js 
------- 

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

export default class Home extends Component { 
    constructor() { 
    super(); 
    } 

    render() { 
    return (
     <div> 
     <Header /> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

page1.js 
-------- 

import React, { Component } from 'react'; 

export default class Page1 extends Component { 
    constructor() { 
    super(); 
    } 

    render() { 
    return (
     <div> 
     <h1> Page 1 </h1> 
     </div> 
    ); 
    } 
} 

Navigazione a "/" e "/ page1" sembrano atterrare in una pagina che indica la sezione di intestazione solo. Qualsiasi aiuto apprezzato.

Answer 1

Si dovrebbe lasciare fuori il constructor quando non sta facendo nulla. Il costruttore di default è:

constructor(...args) { 
    super(...args); 
} 

Così gli argomenti puntelli impliciti non sono sempre passati in Home componente.

Answer 2

Sembra che si desideri eseguire il rendering di page1 durante la navigazione su /? Se è così, il docs seem to indicate che avrete bisogno di un IndexRoute di avere / rotta verso page1 per impostazione predefinita:

let routes = (
    <Router> 
    <Route path="/" component={Home}> 
     <IndexRoute component={Page1} /> 
    </Route> 
    </Router> 
); 

Answer 3

non ero in grado di testare questo, ma penso che senza fornire una storia, reagiscono-router non sarà in grado di leggere la posizione dell'URL. Quindi avrebbe senso per rendere solo il percorso /.

<Router history={browserHistory}> 
... 
</Router> 

Answer 4

maggior parte delle risposte toccare su queste singolarmente, ma penso che è necessario combinare un percorso indice, cronologia del browser, e trasformare il vostro esportazione in un componente di reagire in questo modo:

import { Router, browserHistory } from 'react-router' 

const Routes =() => { 
    return (
     <Router history={browserHistory}> 
      <Route path="/" component={Home}> 
       <IndexRoute component={Page1}/> 
      </Route> 
     </Router> 
    ) 
} 

export default Routes; 

Questo dovrebbe essere valido per l'ultima versione di React Router (2.0.0-rc5)