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
您似乎在路线中混用了 handler
和 component
属性。 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>
我在使用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
您似乎在路线中混用了 handler
和 component
属性。 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>