javascript - React-router 子路径渲染未触发正确的组件

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>