this.props.children returns react-router 中为空

Question

我是 React 新手-router.I 正在按照此教程形式进行操作 https://css-tricks.com/learning-react-router/

这是我写的代码：-

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

就我而言，我设置路由器的方式希望在访问根目录时看到 SearchLayout 组件内的 UserList 组件、MainLayout 组件内的 SearchLayout 组件以及 Home 组件内的所有组件在我的页面中，在我的例子中是 localhost:8000。但我所看到的只是 Home Component 内部的 h2 标签和 console.log(this.props.children) 记录 null.

Answer 1

我认为问题在于您正在访问 localhost:8000 而不是 localhost:8000/users

在localhost:8000，匹配“/”路径，只有Home组件。要在 SearchLayout 内、MainLayout 内、Home 内查看 UsersList，您需要转到 /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>

Answer 2

现在呢？不确定您的结构？

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

this.props.children returns react-router 中为空

this.props.children returns null in react-router

reactjs

react-router

react-jsx