javascript - react 路由器困惑

Question

React 和 React-router 的新功能。

我试图理解这个例子:

https://github.com/ReactTraining/react-router/blob/1.0.x/docs/API.md#components-1

但是 this.props 从不包含 main 或 sidebar。我的代码:

主要.js

ReactDOM.render(
    <Router>
      <Route path="/" component={App2}>
        <Route path="/" components={{main: Home, sidebar: HomeSidebar}}/>

      </Route>
    </Router>,
  document.getElementById('content')
);

App2.js

class App2 extends React.Component {
  render() {
    const {main, sidebar} = this.props;
    return (
        <div>
          <Menu inverted vertical fixed="left">
            {sidebar}
          </Menu>
          <Container className="main-container">
            {main}
          </Container>
        </div>
    );
  }
}

export default App2;

首页.js

import React from 'react';

class Home extends React.Component {

  render() {
    return (
      <div><h1>Home</h1></div>
    );
  }

}

export default Home;

HomeSidebar.js

class HomeSidebar extends React.Component {
  render() {
    return (
      <div>
        <p>I'm a sidebar</p>
      </div>

    );
  }
}

export default HomeSidebar;

我正在使用 Electron 和 React 开发工具。每当我调试时，this.props 既不包含主栏也不包含侧边栏。知道为什么会这样吗？

我也尝试过使用 IndexRoute，但它似乎不支持 components prop。

我尝试过的其他事情

ReactDOM.render(
    <Router>
      <Route component={App2}>
        <Route path="/" components={{main: Home, sidebar: HomeSidebar}}/>
      </Route>
    </Router>,
  document.getElementById('content')
);

ReactDOM.render(
    <Router>
      <Route path="/" component={App2} components={{main: Home, sidebar: HomeSidebar}}>
        <Route path="admin" components={{main: Admin, sidebar: AdminSidebar}}/>
      </Route>
    </Router>,
  document.getElementById('content')
);

Answer 1

看起来你需要使用 <IndexRoute /> 的组件 Prop 工作组件而不是 <Route /> .在 react-router 文档中，它提到 IndexRoute 具有与 Route 相同的所有属性

<IndexRoute components={{main: Main, side: Side}} />

有效!

完整代码:

React.render((
  <Router>
    <Route path="/" component={App} >
      <IndexRoute components={{main: Main, side: Side}}  />
    </Route>
  </Router>
), document.getElementById('app'))

代码笔:http://codepen.io/chmaltsp/pen/ZeLaPr?editors=001

干杯!