rendering components in div with react router

Question

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;

your code is confusing. what's the first block and what's the second? why is the first commented out? — Nitzan Tomer
– Nitzan Tomer, Commented Apr 18, 2016 at 20:54
Besides being commented out, the code looks fine as is. Are you getting any errors in the console? — azium
– azium, Commented Apr 18, 2016 at 20:59
it was commented out because it didn't work at all and I was trying other things. uncommented this now. and yes, I have a few errors, the one that seems like it matters though is root.tsx?f149:5 Uncaught TypeError: Cannot read property 'Component' of undefined — ceckenrode
– ceckenrode, Commented Apr 18, 2016 at 21:44
Can you try changing import React from 'react' to import * as React from 'react'; in your root.tsx — user1641172
– user1641172, Commented Apr 18, 2016 at 22:03

user1641172 · Accepted Answer · 2016-04-18 22:11:05Z

2

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

answered Apr 18, 2016 at 22:11

user1641172

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

rendering components in div with react router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related