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

Peter Bengtsson 发表于 Dev

彼得·本格森

我的路线设置如下：

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'))

当我点击#/它会触发组件中的render()方法Homepage。伟大的。当我点击#/games它会触发组件中的render()方法Games。伟大的。但！当我点击#/games/1（或其他任何代替1）时，它将渲染该Games组件。不是Game组件！:(

乔尼·布坎南

您的路由配置对我来说似乎还可以。{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>