this.props.children возвращает нуль в реагирующий маршрутизатор

Question

Я новичок в реагировать на маршрутизатор. Я следовал этой форме учебника 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'));

Что касается меня, то, как я настроил маршрутизаторы, я ожидаю увидеть компонент UserList внутри компонента SearchLayout, компонент SearchLayout внутри компонента MainLayout и все это внутри компонента Home при посещении корня моей страницы, который это localhost:8000 в моем случае. Но все, что я вижу, это тег h2 внутри Home Component и console.log(this.props.children), в котором журналы отсутствуют.

Answer 1

А сейчас? Не уверен насчет своей структуры?

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

Answer 2

Я думаю, проблема в том, что вы посещаете localhost:8000 вместо localhost:8000/users

На localhost:8000, он соответствует пути "/" только с компонентом Home. Чтобы увидеть UsersList внутри SearchLayout, внутри MainLayout, внутри Home, вам нужно перейти к /users. Если вы хотите, чтобы вышеуказанное загружалось в "/", вы должны добавить IndexRoute выше UserList:

  <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>