[英]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.