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。我尝试对其进行调试，并注意到调用了render() HomeView方法，但未调用render() DefaultView方法。

我错过了什么？

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似乎不起作用

2 个答案: