Nawigacja routera typu reACT nie działa

Question

Zaimplementowałem aplikację testową reagowania JS z routerem reagowania w ES6, ale nie działa. Fragment kodu I poniżej:

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> 
    ); 
    } 
} 

Poruszanie się na „/” i „/ page1” zdają się lądować w stronę wskazującą sam sekcję nagłówka. Każda pomoc doceniona.

Answer 1

Powinieneś pominąć constructor, gdy nic nie robi. Domyślny konstruktor jest:

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

Więc argumenty ukryte rekwizyty nie są coraz przeszedł do Home komponentu.

Answer 2

Wygląda na to, że chcesz wyświetlić page1, aby wyświetlić się podczas nawigacji do /? Jeśli tak, docs seem to indicate, że będziesz potrzebował IndexRoute mieć / drogę do page1 domyślnie:

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

Answer 3

nie byłem w stanie przetestować ten, ale myślę, że bez podania historię, reagują-router nie będzie w stanie odczytać lokalizacji adresu URL. Więc ma to sens, aby wyświetlał tylko ścieżkę /.

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

Answer 4

Większość odpowiedzi dotknąć na nich indywidualnie, ale myślę, że trzeba połączyć trasę indeksu, historię przeglądarki i włącz swój eksport do komponentu reagować jak ta:

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

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

export default Routes; 

Powinno to ważna dla najnowszej wersji routera React (2.0.0-rc5)