使用 React 路由器渲染 div 中的组件

Question

我正在做一个新项目，对 React 还很陌生。我们正在使用打字稿（TSX）。到目前为止，我有一个 index.html 文件，其中 div 的 ID 为 'root'。我有一个 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;

Answer 1

根据您评论中的错误描述

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

React 在 root.tsx 的第 5 行未定义（如下），因此必须有某些内容不适用于您的 import 语句：

class Root extends React.Component

我建议按照您在 main.tsx.

中所做的相同方式导入它

import * as React from 'react'

而不是

import React from 'react';

使用 React 路由器渲染 div 中的组件

rendering components in div with react router

typescript

reactjs

react-router