2016-07-26 9 views
1

私の/ルートが私の主なコンポーネントを正しくレンダリングしません。React JSのルートが正しく動作しません

は、ここに私のコードです:

ReactDOM.render(
    <Router history={browserHistory}> 
     <Route path="/" componenet={Main}> 
      <IndexRoute component={Index}></IndexRoute> 
      <Route path="portfolio" component={Portfolio}></Route> 
     </Route> 
    </Router>, 
    document.getElementById('app') 
); 

これは私の主な構成要素である:私はこのウェブサイトをロードしたら

export default class Main extends React.Component {  
    render() { 
     console.log("asdfasfsaf"); 
     return(
     <div> 
      <h1> This is Main Page </h1> 
      {this.props.children} 
     </div> 
     ) 
    } 

} 

、それは私のIndexコンポーネントに行きます。ただし、<h1> This is Main Page </h1>Main.jsであることはありません。その後、私はMain.jsのコードをすべて完全に消去してリロードし、それでもエラーが発生していないことを確認しました。誰もがこれに対する解決策を知っていますか?

+0

peroperly>正しく、componenet>コンポーネントタイプミスを持っている:) –

答えて

1

あなたはここに<Route path="/" componenet={Main}>そのコンポーネント

ReactDOM.render(
    <Router history={browserHistory}> 
    <Route path="/" component={Main}> 
     <IndexRoute component={Index}></IndexRoute> 
     <Route path="portfolio" component={Portfolio}></Route> 
    </Route> 
</Router>, 
document.getElementById('app') 
); 

export default class Main extends React.Component {  
    constructor(props) { 
    super(props) 
    } 
    render() { 
    console.log("asdfasfsaf"); 
    return(
     <div> 
      <h1> This is Main Page </h1> 
      {this.props.children} 
     </div> 
    ) 
    } 
} 
関連する問題