反應路由器this.props.children是「空」

的發生什麼成分是空反應路由器this.props.children是「空」

在我的概念代碼是聽到：

我的應用程序，並在格和進口需求更多組件

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

在主文件

import {Link} from 'react-router';

在0

<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 />是表演。

而且鏈接是：

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

}

，當我點擊鏈接：Warning: [react-router] Location "/genre/Thriller" did not match any routes（驚悚片流派）

請幫助我。謝謝。

來源

2016-03-01 Ton

我不認爲<IndexRoute />接受任何子路線。您可能正在尋找類似於：

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

雖然這可能會混合您的路線路徑。您可能希望將整個內容組件從路由中取出，並使App呈現給孩子。

來源

2016-03-01 09:44:16 Mikroware

反應路由器this.props.children是「空」

回答

相關問題