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;

我使用电子反应开发工具。每当我调试时，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

看起来您需要使用User组件代替<IndexRoute />。在react-router文档中，它提到IndexRoute具有所有与Route相同的道具

<Route />

作品！

完整代码：

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

Codepen：http://codepen.io/chmaltsp/pen/ZeLaPr?editors=001

干杯！

Answer 2

如果你正在使用当前版本的react-router（v4.0.0），看起来他们已经废弃了路由上的组件prop：https://reacttraining.com/react-router/web/api/Route

您可以在任何地方渲染路线，他们甚至可以在sidebar example处执行此操作。它们有一组Route组件用于呈现主要组件，另一组Route组件用于侧栏，但两者都来自单个路由配置以保持DRY。

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

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;

Answer 3

github的例子是2年前写的（看here），我不确定它与哪个特定版本相关。而且我不确定它现在是否有效（因为我也是新的反应），但我知道你没有使用这种方法来实现这个目标，你可以使用包含mainz的分离组件和sidebar，这是我的例子：

class App2 extends React.Component {
  render() {
    return (
        // Your Menu.
        // Your Container.
        <div>
          {this.props.children}
        </div>
    );
  }
}
class Home extends React.Component {
  render() {
    return (<div><h1>Home</h1></div>);
  }

}
class HomeSidebar extends React.Component {
  render() {
    return (<div><p>I am a sidebar</p></div>);
  }
}
class HomeWithSidebar extends React.Component {
  render() {
    return (
      <div>
          <Home />
          <HomeSidebar />
      </div>
    );
  }
}   
ReactDOM.render(
    <Router history={browserHistory}>
      <Route path="/" component={App2}>
        <Route path="/a2" components={HomeWithSidebar} />
      </Route>
    </Router>,
  document.getElementById('content')
);

PS：不要忘记在示例中使用<Router history={browserHistory}>。
在您的示例中使用IndexRoute或指定其他内容，例如我的示例中的/a2。

Answer 4

我自己对路由器做出反应，但我确信您使用的路线不正确。在示例中，您提供了2个不同的路径，这些路径解析为相同的路径（/）：

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

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

我认为这应该是这样的：

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

Answer 5

我希望您知道您正在使用react-router 1.0.x并且它已经过时了。当前版本是4.x。

下面的代码完美无缺（基于您提供的示例）。

let Router = ReactRouter.Router;
let RouterContext = Router.RouterContext;
let Route = ReactRouter.Route;

class App2 extends React.Component {
  render () {
    const { main, sidebar } = this.props;
    return (
      <div>
        <div className="Main">
          {main}
        </div>
        <div className="Sidebar">
          {sidebar}
        </div>
      </div>
    )
  }
}


class Home extends React.Component {

  render() {
    return (
      <div><h1>Home</h1></div>
      
    );
  }

}


class HomeSidebar extends React.Component {
  render() {
    return (
      <div>
        <p>I'm a sidebar</p>
      </div>

    );
  }
}


ReactDOM.render(
    <Router>
      <Route component={App2}>
        <Route path="/" components={{main: Home, sidebar: HomeSidebar}}/>
      </Route>
    </Router>,
  document.getElementById('content')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/1.0.3/ReactRouter.min.js"></script>

<div id="content"></div>

反应路由器混淆

5 个答案: