使用react路由器在div中呈现组件
使用react路由器在div中呈现组件
提问于 2016-04-18 20:19:23
我正在做一个新的项目，我对此反应很新。我们正在使用打字本(TSX)。到目前为止，我有一个带有id为“root”的div的index.html文件。我有一个main.tsx文件，我相信这是我的主要组件。这是那个的代码
/// <reference path="../../../../typings/main.d.ts"/>
require('file?name=[name].[ext]!../../index.html');
/*----------- STYLESHEETS -----------*/
require('flexboxgrid/css/flexboxgrid.css');
/*=============================================>>>>>
= MODULES =
===============================================>>>>>*/
import * as React from 'react';
import { render } from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
/*----------- ROUTE COMPONENTS -----------*/
import Root from './common/root.tsx';
import Home from './home/home.tsx';
import Login from './login/login.tsx';
//
// /*= End of MODULES =*/
// /*=============================================<<<<<*/
render((
<Router history={browserHistory}>
{/** ###### HOME ROUTE ###### */}
<Route path="/" component={Root}>
<IndexRoute component={Home}/>
<Route path="/login" component={Login}/>
</Route>
{/** ###### END HOME ROUTES ###### */}
</Router>
), document.getElementById('root'));我不知道如何做我的root.tsx文件，以便它出现在我的根div中。到目前为止，这就是我的root.tsx文件的内容。
"use strict";
import React from 'react';
class Root extends React.Component {
render() {
return(
<div>
<h1>About page!</h1>
</div>
)
}
}
export default Root;回答 1
Stack Overflow用户
回答已采纳
发布于 2016-04-18 22:11:05
基于注释中的错误描述
root.tsx?f149:5未定义TypeError:无法读取未定义的属性“组件”
React在root.tsx的第5行中没有定义(如下所示)，所以import语句必须有一些不工作的东西：
class Root extends React.Component
我建议以您在main.tsx中所做的同样的方式导入它。
import * as React from 'react'而不是
import React from 'react';页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36703530
复制相关文章
相似问题
腾讯云开发者
