React-Router mit Kind in Go Wie funktioniert es?

Question

Ich versuche react-router mit einem Server in Go zu verwenden.

Ich habe einige Tests gemacht, aber ich kann nicht tun, was ich will.

Meine reagieren Komponenten:

var App = React.createClass({ 
    render: function(){ 
     return (
      <div> 
      <h2>App</h2> 
      <li><Link to="/page1">Page 1</Link></li> 
      <li><Link to="/page2">Page 2</Link></li> 
      </div> 
     ) 
    } 
}) 

var Page1 = React.createClass({ 
    render: function(){ 
     return (
      <div> 
      <h2>Page 1</h2> 
      <li><Link to="/page2">Page 2</Link></li> 
      </div> 

     ) 
    } 
}) 

var Page2 = React.createClass({ 
    render: function(){ 
     return (
      <div> 
      <h2>Page 2</h2> 
      <li><Link to="/page1">Page 1</Link></li> 
      </div> 

     ) 
    } 
}) 

Meine reagieren Routing:

ReactDOM.render((<Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <Route path="page1" component={Page1} /> 
     <Route path="page2" component={Page2} /> 
    </Route> 
    </Router>), document.getElementById('app')) 

mein go-Server:

func Render(c web.C, w http.ResponseWriter, r *http.Request) { 
     RenderHTMLPage(w, "index.html") 
} 

func main() { 
     goji.Get("/page1", Render) 
     goji.Get("/page2", Render) 
     goji.Get("/", Render) 
     goji.Serve() 
    } 

Mein Problem ist, wenn ich Komponente in 'App' den Link klicken zum Beispiel:

<li><Link to="/page1">Page 1</Link></li> 

url Änderungen wie die

http://localhost:8000/page1

Aber tatsächliche Komponente ist bereits App und nicht Seite1, so url Änderungen aber nicht Komponente. Und wenn ich direkt URL laden, habe ich das gleiche Ergebnis.

Hilft mir jemand?

Answer 1

Dies ist keine Frage, sondern eine Antwort Frage, müssen Sie die Kinder der App-Komponente rendern, damit die anderen beiden Komponenten angezeigt werden, a la dieses Code-Snippet aus den Dokumenten für React Router (https://github.com/reactjs/react-router/blob/master/docs/API.md#props-2):

const routes = (
    <Route component={App}> 
    <Route path="groups" component={Groups} /> 
    <Route path="users" component={Users} /> 
    </Route> 
) 

class App extends React.Component { 
    render() { 
    return (
     <div> 
     {/* this will be either <Users> or <Groups> */} 
     {this.props.children} 
     </div> 
    ) 
    } 
}