反应路由器 this.props.children 是 'null'

Question

发生了什么组件为空

当我的概念代码被听到时：

我的应用程序和 div 中的更多组件以及导入的要求

import {Router,Route,IndexRoute,hashHistory} from 'react-router'

在主文件中

import {Link} from 'react-router';

在 <Link>(BrowseBtn) 文件中

export default class App extends Component{

  render(){
    return(
      <div id="app">
        <AppNav />
        {this.props.children}
      </div>
    );
  }
}

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Content}>
        <IndexRoute component={MoviesGrid} />
        <Route path="genre/:title" component={MoviesGrid}/>
      </IndexRoute>
    </Route>
  </Router>
),document.getElementById("body"));

export default class Content extends Component {

  render(){
    return(
      <div>
        <MoviesBanner/>
        <div className="container-content">

          {this.props.children} {/*Not work*/}

          <MoviesGrid /> {/*Work*/}

          <RightBar />
        </div>
      </div>
    );
  }
}

export default class MoviesGrid extends Component {

  loadGridMovies(){

    $.ajax({
      type:'GET',
      crossDomain: true,
      url: this.props.source,
      dataType: 'JSON',
      cache: false,
      contentType: "application/x-www-form-urlencoded",
      success: function(data) {
          this.setState({items: data.gridContent.items});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(status, err.toString());
      }.bind(this)
    });

  }

  componentDidMount() {
   this.loadGridMovies();
  }

  constructor(props) {
    super(props);
    this.state = {items:[]};
    this.props.source = (this.props.params.source ? this.props.params.source : 'http://MyApi?client=web');
    this.loadGridMovies = this.loadGridMovies.bind(this);
  }

  render(){

    let render_item = this.state.items.map(function(getRow,i){
      return(
        <GridMovieItem key={i} data={getRow}/>
      );
    });

    return (
      <div className="moviesgrid col-sm-8 col-xs-12">
        <div className="moviesgrid-header">Action</div>
        <div className="moviesgrid-body">
          {render_item}
        </div>
      </div>
    );
  }
}

{this.props.children} 内容无效，反应检查为空但是 <MoviesGrid /> 是节目。

而link是：

export default class BrowseBtn extends Component {

  loadMenuBrowse(){

    $.ajax({
      type:'GET',
      crossDomain: true,
      url: this.props.source,
      dataType: 'JSON',
      cache: false,
      contentType: "application/x-www-form-urlencoded",
      success: function(data) {
          this.setState({data: data.menuItems});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.source, status, err.toString());
      }.bind(this)
    });

  }

  constructor(props) {
    super(props);
    this.state = {data:[]};
    this.loadMenuBrowse();
  }

  render(){

    let render_item = this.state.data.map(function(getRow,i){
      let title = getRow.title;
      let targetUrl = getRow.targetUrl;
      return (
            <li className="col-sm-4 col-xs-3" key={i}><Link to={`/genre/${title}`} params={{ source: targetUrl }}>{title}</Link></li>
      );
    });

    return (
      <Nav>
        <NavDropdown className="browseBtn" title="Browse" id="basic-nav-dropdown">
          {render_item}
        </NavDropdown>
      </Nav>
    );
  }

}

当我点击 link 时：Warning: [react-router] Location "/genre/Thriller" did not match any routes（惊悚片类型）

请帮助我。谢谢。

Answer 1

我认为 <IndexRoute /> 不接受任何子路由。您可能正在寻找类似的东西：

<Route path="/" component={App}>
    <IndexRoute component={Content}>
    <Route path="content" component={Content}>
        <IndexRoute component={MoviesGrid} />
        <Route path="genre/:title" component={MoviesGrid}/>
    </Route>
</Route>

虽然这可能会混淆您的路线路径。您可能希望将整个 Content 组件从路由中取出，并让 App 使用子组件呈现它。

反应路由器 this.props.children 是 'null'

react router this.props.children is 'null'

reactjs

react-router