組件無法使用ReactJS和React Router渲染嗎？

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

您不應該在Index組件中呈現Index。

這個

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"

而不是使用顯式命名的export import { Index } ..