组件不使用 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' ) 
  );
});

索引.jsx：

import React, { Component } from 'react';

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

两个.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"

而不是使用显式命名导出import { Index } ..