コンポーネントはReactJSとReact Routerでレンダリングされませんか？

Question

MeteorとReactを使用してWebアプリケーションを構築し、React内で2つのビューをレンダリングしようとしていますが、インデックスコンポーネントはレンダリングしません。 「2つの」コンポーネントがあります。ここに私のroutes.jsxは次のとおりです。

import React from 'react'; 
import { render } from 'react-dom'; 
import { Router, Route, browserHistory } from 'react-router'; 

import { Index } from '../../ui/components/index.jsx'; 
import { Two } from '../../ui/pages/two.jsx'; 

Meteor.startup(() => { 
    render( 
    <Router history={ browserHistory }> 
     <Route path="/" component={ Index } /> 
     <Route path="/two" component={ Two } /> 
    </Router>, 
    document.getElementById('react-root') 
); 
}); 

Index.jsx：

import React, { Component } from 'react'; 

export default class Index extends Component { 
    render() { 
     return(
     <Index className="container"> 
      <header> 
       <h1>Todo List</h1> 
      </header> 
     </Index> 
     ); 
    } 
} 

Two.jsx：

import React from 'react'; 

export const Two =() => <h3>Two</h3>; 

何が起こっていますか？どんな助けにも感謝！

Answer 1

インデックスコンポーネント内にインデックスを描画しないでください。

この

import React, { Component } from 'react'; 

export default class Index extends Component { 
    render() { 
     return(
     <Index className="container"> 
      <header> 
       <h1>Todo List</h1> 
      </header> 
     </Index> 
     ); 
    } 
} 

を使用すると、デフォルトのエクスポートとしてIndexを輸出しているとして、あなたは

import Index from '../../ui/components/index.jsx'; 

または

を使用する必要があります加えて

import React, { Component } from 'react';  

export default class Index extends Component { 
    render() { 
     return(
     <div className="container"> 
      <header> 
       <h1>Todo List</h1> 
      </header> 
     </div> 
     ); 
    } 
} 

する必要があります

明示的な名前付きエクスポートを使用する代わりにimport { Index } ..