反应路由器混乱

Question

新的反应和反应路由器.

我试图理解这个例子:

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

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

Main.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;

Home.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;

我正在使用带有react dev工具的电子.每当我调试时,this.props既不包含main也不包含侧边栏.知道为什么会这样吗？

我也试过使用IndexRoute,但它似乎不支持组件道具.

我试过的其他事情

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

如果您使用的是当前版本的react-router（v4.0.0），看起来他们取消了路由上的组件道具： https: //reacttraining.com/react-router/web/api/Route

您可以在任何地方渲染路线，他们甚至有一个侧边栏示例来实现这一点。他们有一组路由组件来渲染主要组件，另一组路由组件用于侧边栏，但两者都来自单个路由配置以保持干燥。

要将其转换为您的代码，您可以创建一个路由配置：

const routes = [
  { path: '/',
    sidebar: Sidebar
    main: Main
  }
];

然后在Main.js中

ReactDOM.render(
    <Router>
      <Route component={App2}>
        {routes.map((route, index) => (
          <Route
            key={index}
            path={route.path}
            component={route.main}
          />
        ))}
      </Route>
    </Router>,
  document.getElementById('content')
);

然后在App2.js中

class App2 extends React.Component {
  render() {
    return (
        <div>
          <Menu inverted vertical fixed="left">
            {routes.map((route, index) => (
              <Route
                key={index}
                path={route.path}
                component={route.sidebar}
              />
            ))}
          </Menu>
          <Container className="main-container">
            {this.props.children}
          </Container>
        </div>
    );
  }
}

export default App2;