使用React Router在div中渲染组件

Question

我正在一个新项目上，对React来说是个新手。 我们正在使用typescript（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文件，以便它显示在我的root 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;

Answer 1

根据您评论中的错误描述

root.tsx？f149：5未捕获的TypeError：无法读取未定义的属性“ Component”

在root.tsx第5 root.tsx （以下）中未定义React ，因此必须使用import语句：

class Root extends React.Component

我建议以与在main.tsx相同的方式导入它。

import * as React from 'react'

代替

import React from 'react';