簡單的反應路由器不工作

Question

不能爲我的生活得到一個簡單的反應路由器工作！它顯示第一頁，但是當我點擊鏈接時，它不會做任何事情，但將網址更改爲/ home。它不斷顯示「應用程序」。爲什麼沒有加載家庭組件？

簡單代碼：

import React from 'react'; 
import { Link } from 'react-router' 
import { render } from 'react-dom' 
import { Router, Route } from 'react-router'  

class App extends React.Component { 
    render() { 
     return (
      <div><Link to="/home">app</Link></div> 
     ); 
    } 
}  

class Home extends React.Component { 
    render() { 
    return (
     <div>Honey, I'm home!!!</div> 
    ); 
    } 
}  

render(
    <Router> 
     <Route path="/" component={App}> 
      <Route path="home" component={Home}/> 
     </Route> 
    </Router>, 
    document.getElementById('tempoot') 
) 

Answer 1

因爲你還沒有告訴它呈現Home任何地方。你需要做的事情（你缺少的核心東西是{this.props.children}）：

import React from 'react'; 
import { Link } from 'react-router' 
import { render } from 'react-dom' 
import { Router, Route } from 'react-router'  

class App extends React.Component { 
    render() { 
     return (
      <div> 
      <div className="nav"> 
       <Link to="/home">app</Link> 
      </div> 
      <div className="content"> 
       // THIS IS THE CORE LINE YOU ARE MISSING 
       {this.props.children || "No one is home :("} 
      </div> 
      </div> 
     ); 
    } 
}  

class Home extends React.Component { 
    render() { 
    return (
     <div>Honey, I'm home!!!</div> 
    ); 
    } 
}  

render(
    <Router> 
     <Route path="/" component={App}> 
      <Route path="home" component={Home}/> 
     </Route> 
    </Router>, 
    document.getElementById('tempoot') 
)