React路由器子路径呈现不触发正确的组件。

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

在我看来，你的路由配置是可以的。在呈现{this.props.children}时是否包括Games？

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>