IndexRoute 似乎不起作用

Question

我正在使用 react-router 1.0.3 并且具有以下路由配置：

ReactDOM.render(
<Router history={ History.createHistory() }>
  <Route path="/pages/home.aspx" component={ HomeView }>
    <IndexRoute component={ DefaultView } />
  </Route>
</Router>,
document.getElementById(appRoot.id));

当我浏览到 /pages/home.aspx 时，会呈现 HomeView 但其中没有 DefaultView。我尝试调试它并注意到 HomeView 的 render() 方法被调用，但是 DefaultView 的 render() 方法没有被调用。

我错过了什么？

Answer 1

已编辑答案：

您需要将 {this.props.children} 放在 'HomeView' 的渲染函数中，这在每个包含子视图的视图中都是必不可少的（就像这种情况一样）

由于您不确定它是否仍然可以参与路由，它会的，请试一试：

ReactDOM.render(
<Router history={ History.createHistory() }>
  <Route path="/pages/home.aspx" component={ HomeView } onEnter={HomeView.onEnter}>
    <IndexRoute component={ DefaultView } onEnter={DefaultView.onEnter} />
  </Route>
</Router>,
document.getElementById(appRoot.id));

并在 'DefaultView'/'HomeView'

中定义静态 onEnter

React.createClass({
    statics: {
      onEnter(next, transition) {
        console.log('Hi from HomeView/DefaultView')
      }
    },
    render() {
      ....
    }
  });

Answer 2

您需要在父组件中渲染 children 才能渲染子组件。检查 Adding an Index.

在您的 HomeView 渲染方法中的某处（div 不是必需的，添加只是为了清楚）：

<div>
  {this.props.children}
</div>

在你的例子中 this.props.children 将是一个 DefaultView 元素。

IndexRoute 似乎不起作用

IndexRoute doesn't seem to work

reactjs

react-router