Question

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

Answer 1

您的路线上看起来混合了handler和component属性。最新版本的React Router中删除了handler。

尝试：

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

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

1 个答案: