陣營路由器子路徑渲染不觸發正確的組件

Question

我有我的路線設置這樣的：

ReactDOM.render((
    <Router> 
    <Route path="/" component={App}> 
     <IndexRoute component={Homepage} /> 
     <Route path="games" component={Games}> 
     <Route path=":id" component={Game}/> 
     </Route> 
    </Route> 
    </Router> 
), document.getElementById('mount-point')) 

當我打​​它觸發在Homepage組件render()方法。大。當我點擊#/games時，會觸發Games組件中的render()方法。大。 但是！當我點擊#/games/1（或其他任何東西而不是1）時，它會呈現Games組件。不是Game組件！ :(

Answer 1

您的路線配置渲染Games時，似乎沒給我。你是包括{this.props.children}？

http://jsfiddle.net/8L7fa64w/3/

<meta charset="UTF-8"> 
<script src="https://fb.me/react-0.14.2.js"></script> 
<script src="https://fb.me/react-dom-0.14.2.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/1.0.0-rc3/ReactRouter.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.33/browser-polyfill.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.33/browser.min.js"></script> 
<div id="mount-point"></div> 
<script type="text/babel">void function() { "use strict" 

var {Router, Route, IndexRoute, Link} = ReactRouter 

var App = ({children}) => <div> 
    <h1>App</h1> 
    <Link to="/games">Games</Link> | <Link to="/games/42">Game 42</Link> 
    {children} 
</div> 

var Homepage = ({children}) => <div> 
    <h2>Homepage</h2> 
    {children} 
</div> 

var Games = ({children}) => <div> 
    <h2>Games</h2> 
    {children} 
</div> 

var Game = ({params}) => <div> 
    <h3>Game {params.id}</h3> 
</div> 

ReactDOM.render(<Router> 
    <Route path="/" component={App}> 
    <IndexRoute component={Homepage} /> 
    <Route path="games" component={Games}> 
     <Route path=":id" component={Game}/> 
    </Route> 
    </Route> 
</Router>, document.getElementById('mount-point')) 

}()</script>