組件未使用ReactJS和React路由器進行呈現？

Question

使用Meteor和React構建Web應用程序，我試圖在React中渲染兩個視圖，並且索引組件不會渲染......不確定原因。 '兩'組件的確如此。這裏是我的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> 
     ); 
    } 
} 

應該

import React, { Component } from 'react';  

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

此外如要導出Index作爲默認的出口，你應該使用

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

或

import {default as Index} from "../../ui/components/index.jsx" 

而不是使用明確的命名導出import { Index } ..