组件无法使用ReactJS和React Router呈现？

Building a web app using Meteor and React, and I'm trying to render two views within React, and the index component won't render... unsure why. The 'Two' component does. Here is my routes.jsx:

使用Meteor和React构建Web应用程序,我正在尝试在React中呈现两个视图,并且索引组件将不会呈现......不确定原因。 'Two'组件可以。这是我的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>;

What's going on? Any help appreciated!

这是怎么回事?任何帮助赞赏!

1 个解决方案

#1

You shouldn't be rendering Index inside Index component.

您不应该在Index组件中呈现Index。

this

import React, { Component } from 'react';

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

should be

import React, { Component } from 'react';    

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

In addition as you are exporting Index as the default export, you should use

此外,当您将Index导出为默认导出时,您应该使用

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

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

instead of using explicit named export import { Index } ..

而不是使用显式命名导出导入{索引} ..

#1