Rendering-Komponenten in div mit Reagieren Router

Question

Ich arbeite an einem neuen Projekt und bin sehr neu zu reagieren. Wir verwenden Typoskript (TSX). Bisher habe ich eine index.html Datei mit einem div mit einer ID von 'root'. Ich habe eine main.tsx Datei, die ich glaube, ist für meine Hauptkomponente. hier ist der Code für die

/// <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')); 

Ich bin nicht sicher, wie meine root.tsx Datei zu tun, damit es in meiner Wurzel div auftaucht. Das habe ich bisher für meine root.tsx-Datei.

"use strict"; 

import React from 'react'; 

class Root extends React.Component { 
    render() { 
    return(
     <div> 
      <h1>About page!</h1> 
     </div> 
    ) 
    } 
} 
export default Root; 

Answer 1

Basierend auf der Fehlerbeschreibung in Ihrem Kommentar

root.tsx?f149:5 Uncaught TypeError: Cannot read property 'Component' of undefined

React wird in Zeile 5 von (unten) nicht definiert, so muss es mit Ihrer import Aussage etwas nicht funktioniert sein:

class Root extends React.Component

Ich würde vorschlagen, es auf die gleiche Weise zu importieren, wie Sie es in Ihrer 0 getan haben.

import * as React from 'react' 

statt

import React from 'react';