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

当我点击#/时，它会触发render()组件中的Homepage方法。大。当我点击#/games时，它会触发render()组件中的Games方法。大。 但是！当我点击#/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>

React-router子路径渲染不会触发正确的组件

1 个答案: