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

当使用react-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

回答(1)

2 years ago

看起来你的路线上混合了 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>