Question

我是react-router的新手。我正在按照这个教程形式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内部的UsersList，在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>

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在react-router

2 个答案: