Javascript 反应路由器混乱

新的反应和反应路由器

我试图理解这个例子：

但是这个.props从不包含主工具栏或边栏。我的代码：

Main.js

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

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

ReactDOM.render(
,
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;

类App2扩展了React.Component{ render（）{ const{main，sidebar}=this.props； 返回( {侧边栏} {main} ); } } 导出默认App2； Home.js

import React from 'react';

class Home extends React.Component {

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

}

export default Home;

从“React”导入React；
类Home扩展了React.Component{
render（）{
返回(
家
);
}
}
导出默认主页；

HomeSidebar.js

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

    );
  }
}

export default HomeSidebar;

class HomeSidebar扩展了React.Component{
render（）{
返回(
我是一个边栏

);
}
}
导出默认HomeSidebar；

我用的是电子和反应开发工具。每当我调试时，this.props既不包含主栏也不包含侧栏。知道为什么会这样吗

我也尝试过使用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')
);

ReactDOM.render(
,
document.getElementById（'content'）
);
ReactDOM.render(
,
document.getElementById（'content'）
);

看起来您需要使用

组件而不是

，使组件正常工作。在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'))

React.render((
)，document.getElementById（'app'））

代码笔：

---

干杯

github的示例是两年前编写的（看），我不确定它与哪个特定版本相关。我不确定它现在是否有效（因为我也是react新手），但我知道您不必使用这种方法来达到这个目标，您可以使用包含

mainz

和

侧栏的分离组件，这里是我的示例：

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')
);

类App2扩展了React.Component{
render（）{
返回(
//你的菜单。
//你的集装箱。
{this.props.children}
);
}
}
类Home扩展了React.Component{
render（）{
返回（家）；
}
}
类HomeSidebar扩展了React.Component{
render（）{
返回（我是一个侧边栏
）；
}
}
类HomeWithSidebar扩展了React.Component{
render（）{
返回(
);
}
}   
ReactDOM.render(
,
document.getElementById（'content'）
);

注意：不要忘记在您的示例中使用

。

---

并在您的示例中使用

IndexRoute

，或指定另一个，如我的示例中的

/a2

。

我本人对react router不熟悉，但我确信您使用的路由不正确。在您给出的示例中，有两条不同的路由解析为同一路径（/）：

ReactDOM.render(
,
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')
);

ReactDOM.render(
,
document.getElementById（'content'）
);

如果您使用的是当前版本的react router（v4.0.0），则看起来他们删除了路由上的组件道具：

你可以在任何地方渲染路线，它们甚至有一个可以这样做的地方。它们有一组用于渲染主组件的路由组件和另一组用于侧栏的路由组件，但它们都来自一个单独的路由配置以保持其干燥

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

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')
);

ReactDOM.render(
{routes.map（（路由，索引）=>(
))}
,
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;

类App2扩展了React.Component{ render（）{ 返回( {routes.map（（路由，索引）=>( ))} {this.props.children} ); } } 导出默认App2；

---

我希望您知道您使用的是react router 1.0.x，它已经过时了。目前的版本是4.x

下面的代码非常有效（基于您提供的示例）

let Router=ReactRouter.Router；
让RouterContext=Router.RouterContext；
让Route=ReactRouter.Route；
类App2扩展了React.Component{
渲染（）{
const{main，sidebar}=this.props；
返回(
{main}
{侧边栏}
)
}
}
类Home扩展了React.Component{
render（）{
返回(
家
);
}
}
类HomeSidebar扩展了React.Component{
render（）{
返回(
我是一个边栏

);
}
}
ReactDOM.render(
,
document.getElementById（'content'）
);

我删除了关于路线具有相同路径的答案，因为它对您没有帮助。但不久前我就是这样解决了一个类似的问题。唉，看起来这是一个“我一直在阅读过时的文档”的案例。我使用的是最新版本，但一直在阅读1.0文档。谢谢你，我很快就会试试。你会得到反对票，因为你让别人朝着正确的方向思考。
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;