I am building a react application and the react router renders a black page. I've googled around and can't seem to figure out what's going on.

index

import React from 'react'

import {render} from 'react-dom'

import routes from './routes'

render(routes, document.getElementById('root'))

routes

import React, { Component } from 'react'

import { Router, Route, hashHistory } from 'react-router'

import Home from './Home.js'

import Name from './Name.js'

//import level from './level.js'

//import level1 from './level1.js'

//import level2 from './level2.js'

//import result from './result.js'



const routes = (

  <Router history={hashHistory}>

    <Route path='/' component={Home} />

    <Route path='/name' component={Name} />

  </Router>

);



export default routes;

component that doesn't render by navigating /name

import React, { Component } from 'react'

import appState from './state.js'

import { Router } from 'react-router'



class Name extends Component {

  constructor() {

    super();

    this.state = {username: ''};

  }



  onUpdateUser = (e) => {

    this.appState.username = e.target.value;

    Router.push({

      pathname: '/level'

    })

  }



  render() {

    return (

      <div className=row>

        <div claassName=col-md-12>

          <div className=nameBox>

            <form className=form-inline onSubmit={this.onUpdateUser()}>

              <input type=text className=form-control placeholder=Desiered Username onChange={this.onUpdateUser} value={this.state.username} />

              <button type=submit className=btn btn-success>Submit</button>

            </form>

          </div>

        </div>

      </div>

    )

  }

}



export default Name

Any help would be appreciated!PS The index route works fine.