React-Router 不呈现 IndexRoute 不包含 AppRoute?

React-Router not render IndexRoute not include AppRoute?

我在使用react-router的时候遇到了一些问题,我的router不渲染Layout组件,只渲染Index组件,这是怎么回事?

我的源代码是这样的:

路由器:

<Router history={createHistory queryKey: false} onUpdate={-> window.scrollTo(0, 0)}>
<Route path="/" handler={Layout}>
  <IndexRoute component={Index}/>
  <Route path="movies" handler={Movies}>
    <Route path=":id" handler={Movies} />
  </Route>
  <Route path="books" handler={Books}>
    <Route path=":id" handler={Books} />
  </Route>
</Route>

布局:

React = require "react"
{Router} = require "react-router"
{AppCanvas, AppBar} = require("material-ui")
require "./layout.less"
Layout = React.createClass
  render: ->
    <AppCanvas>
      <AppBar title="Title" iconClassNameRight="muidocs-icon-navigation-expand-more" />
      <div class="content">
        {this.props.children}
      </div>
    </AppCanvas>
module.exports = Layout

索引:

React = require "react"
Index = React.createClass
  render: ->
    <h1>Welcome,Home</h1>
module.exports = Index

您似乎在路线中混用了 handlercomponent 属性。 handler 已在最新版本的 React Router 中删除。

尝试:

<Router history={createHistory queryKey: false} onUpdate={-> window.scrollTo(0, 0)}>
  <Route path="/" component={Layout}>
    <IndexRoute component={Index}/>
    <Route path="movies" component={Movies}>
      <Route path=":id" component={Movies} />
    </Route>
      <Route path="books" component={Books}>
      <Route path=":id" component={Books} />
    </Route>
  </Route>
</Router>