Reactjs this.props.children在react路由器中返回null

我是新来的反应路由器。我是按照这个教程的形式

这是我写的代码：-

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, Link , IndexRoute, hashHistory, browserHistory} from 'react-router';

class Home extends React.Component{
  constructor(props) {
    super(props);
  }

  render(){
    console.log(this.props.children);
    return(
       <div>
         <h2>Im home</h2>
         {this.props.children}
       </div>
      )
  }
}


class MainLayout extends React.Component{
  constructor(props) {
    super(props);

  }
  render(){
    return(
         <div className="app">
           <header className="primary-header">fdgfdgf</header>
           <aside className="primary-aside">
              <ul>
                <li><Link to="/users">Users</Link></li>
                <li><Link to="/widgets">Widgets</Link></li>
              </ul>
           </aside>
           <main>
              {this.props.childern}
           </main>
         </div>
      )
  }
}

class SearchLayout extends React.Component{
  constructor(props) {
    super(props);

  }
  render(){
    return(
        <div className="search">
           <header className="search-header"></header>
           <div className="results">
              {this.props.childen}
           </div>
           <div class="search-footer pagination"></div>
        </div>
      )
  }
}

class UserList extends React.Component{
  constructor(props) {
    super(props);

  }
  redner(){
    return(
          <ul className="user-list">
            <li>Dan</li>
            <li>Ryan</li>
            <li>Michael</li>
          </ul>       
      )
  }
}




ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={Home}>
      <Route component={MainLayout}>
        <Route component={SearchLayout}>
          <Route path="/users" component={UserList} />
        </Route>
      </Route>
    </Route>
  </Router>
  ), document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
从“react Router”导入{Router，Route，Link，IndexRoute，hashHistory，browserHistory}；
类Home扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
console.log（this.props.children）；
返回(
我在家
{this.props.children}
)
}
}
类MainLayout扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
fdgfdgf

使用者
小部件

{this.props.childern}
)
}
}
类SearchLayout扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.childen}
)
}
}
类UserList扩展了React.Component{
建造师（道具）{
超级（道具）；
}
雷德纳（）{
返回(

丹
瑞安
迈克尔

)
}
}
ReactDOM.render((
)，document.getElementById（'root'）；

就我而言，我设置路由器的方式是，当我访问我的页面根目录时，我希望在SearchLayout组件中看到UserList组件，在MainLayout组件中看到SearchLayout组件，在Home组件中看到整个内容，在我的例子中是localhost:8000。

---

但我看到的只是Home组件和console.log（this.props.children）中的h2标记，它的日志为空。

我认为问题在于您访问的是localhost:8000，而不是localhost:8000/用户

在localhost:8000中，它将“/”路径与匹配，只包含主组件。要查看SearchLayout、MainLayout和Home中的用户列表，您需要转到/users。如果要在“/”处加载上述内容，应在UserList上方添加IndexRoute：

  <Router history={browserHistory}>
    <Route path="/" component={Home}>
      <Route component={MainLayout}>
        <Route component={SearchLayout}>
          <IndexRoute component={MyIndexComponent} />
          <Route path="/users" component={UserList} />
        </Route>
      </Route>
    </Route>
  </Router>

---

我认为问题在于您访问的是localhost:8000，而不是localhost:8000/用户

在localhost:8000中，它将“/”路径与匹配，只包含主组件。要查看SearchLayout、MainLayout和Home中的用户列表，您需要转到/users。如果要在“/”处加载上述内容，应在UserList上方添加IndexRoute：

  <Router history={browserHistory}>
    <Route path="/" component={Home}>
      <Route component={MainLayout}>
        <Route component={SearchLayout}>
          <IndexRoute component={MyIndexComponent} />
          <Route path="/users" component={UserList} />
        </Route>
      </Route>
    </Route>
  </Router>

---

现在呢？但不确定你的结构

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, Link , IndexRoute, browserHistory} from 'react-router';

const Home = (props)=>{
        console.log(props)
       return (<div>
         <h2>Im home</h2>
         {props.children}
       </div>)}


const MainLayout = (props)=>
         <div className="app">
           <header className="primary-header">fdgfdgf</header>
           <aside className="primary-aside">
              <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/users">Users</Link></li>
                <li><Link to="/widgets">Widgets</Link></li>
              </ul>
           </aside>
           <main>
              {props.children}
           </main>
         </div>


const SearchLayout = (props) =>
        <div className="search">
           <header className="search-header"></header>
           <div className="results">
              {props.children}
           </div>
           <div className="search-footer pagination"></div>
        </div>


const UserList = ()=>
          <ul className="user-list">
            <li>Dan</li>
            <li>Ryan</li>
            <li>Michael</li>
          </ul>       

ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={MainLayout}>
        <Route component={SearchLayout}>
        <Route path={'/users'} component={UserList} />
        </Route>
    </Route>
  </Router>
  ), document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
从“react Router”导入{Router，Route，Link，IndexRoute，browserHistory}；
const Home=（道具）=>{
控制台日志（道具）
返回(
我在家
{props.children}
)}
常量主布局=（道具）=>
fdgfdgf

家
使用者
小部件

{props.children}
const SearchLayout=（道具）=>
{props.children}
常量用户列表=（）=>

丹
瑞安
迈克尔

ReactDOM.render((
)，document.getElementById（'root'）；

现在呢？但不确定你的结构

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, Link , IndexRoute, browserHistory} from 'react-router';

const Home = (props)=>{
        console.log(props)
       return (<div>
         <h2>Im home</h2>
         {props.children}
       </div>)}


const MainLayout = (props)=>
         <div className="app">
           <header className="primary-header">fdgfdgf</header>
           <aside className="primary-aside">
              <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/users">Users</Link></li>
                <li><Link to="/widgets">Widgets</Link></li>
              </ul>
           </aside>
           <main>
              {props.children}
           </main>
         </div>


const SearchLayout = (props) =>
        <div className="search">
           <header className="search-header"></header>
           <div className="results">
              {props.children}
           </div>
           <div className="search-footer pagination"></div>
        </div>


const UserList = ()=>
          <ul className="user-list">
            <li>Dan</li>
            <li>Ryan</li>
            <li>Michael</li>
          </ul>       

ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={MainLayout}>
        <Route component={SearchLayout}>
        <Route path={'/users'} component={UserList} />
        </Route>
    </Route>
  </Router>
  ), document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
从“react Router”导入{Router，Route，Link，IndexRoute，browserHistory}；
const Home=（道具）=>{
控制台日志（道具）
返回(
我在家
{props.children}
)}
常量主布局=（道具）=>
fdgfdgf

家
使用者
小部件

{props.children}
const SearchLayout=（道具）=>
{props.children}
常量用户列表=（）=>

丹
瑞安
迈克尔

ReactDOM.render((
)，document.getElementById（'root'）；

您使用的是哪一版本的React路由器，本教程是为哪一版本编写的？我使用的是React 3.0.2版。react版本4在导入browserHistory和hashHistory时遇到了一些问题。您注意到，您使用的是redner（），而不是实际渲染component@ashish值得一提的是，该教程发布于2016年3月14日。React Router 3.0.0 2016年10月24日。UserList

render

拼写错误您使用的是React Router的哪个版本，本教程是为哪个版本编写的？我使用的是React版本3.0.2。react版本4在导入browserHistory和hashHistory时遇到了一些问题。您注意到，您使用的是redner（），而不是实际渲染component@ashish值得一提的是，该教程发布于2016年3月14日。React Router 3.0.0 2016年10月24日。UserList

render

拼写错误谢谢，工作正常，但当我点击用户时，我没有得到UserList组件。对不起，如果这是一个愚蠢的问题，我是个新手！请注意，您在主标记中拼写了{this.props.childern}而不是this.props.children}。再次感谢您指出拼写错误，没有解决所提到的问题