繁体   English   中英

组件无法使用ReactJS和React Router渲染吗?

[英]Component not rendering with ReactJS and React Router?

使用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>;

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

您不应该在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 } ..

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM