CODEWITHSUNDEEP
reactjstypescriptreact-router
ceckenrode
ceckenrode

Reputation: 4703

rendering components in div with react router

I'm working on a new project and am very new to React. We are using typescript(TSX). So far I have an index.html file with a div with an id of 'root'. I have a main.tsx file which I believe is for my main component. here is the code for that 

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

I'm unsure of how to do my root.tsx file so that it shows up inside my root div. This is what I have so far for my root.tsx file.

"use strict";

import React from 'react';

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

Upvotes: 1

Views: 724

Answers (1)

user1641172
user1641172

Reputation:

Based on the error description in your comment

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

React is undefined at line 5 of root.tsx (below), so there must be something not working with your import statement:

class Root extends React.Component

I would suggest importing it the same way as you have done in your main.tsx.

import * as React from 'react'

instead of

import React from 'react';

Upvotes: 2

Related Questions