React Router Renders Blank Page

Question

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.

Answer 1

What's the path of ./routes? Do you have a /routes/index.js file that consists of the code that you put for the routes?

Also I recommend that you use browserHistory instead of hashHistory for 'normal' url's, without hashes. More info about that here

For your Name class I would recommend you to use the withRouter Higher Order Component from React Router. This injects 'router' as a prop, inside of your component, so you can use this.props.router.push('/path').

this.appState actually does nothing right now. You're importing 'appState' that isn't being touched. Right now you're setting 'appState' within the Name component. Don't you mean to use this.setState({ username: e.target.value })?. It's also a better practice to use onUpdateUser(e) { code } instead of arrow functions for a class function.

I also see <form className="form-inline" onSubmit={this.onUpdateUser()}> - I think that onUpdateUser is currently called when rendering this component. You should do onSubmit={this.onUpdateUser} instead, so the function gets called when onSubmit is triggered. Or onSubmit={e => this.onUpdateUser(e)}, both things work.

What exactly are you trying to achieve with this code?

---

Edit:

I've added a gist in which I created the 'introduction - set username - choose level - rest' flow without using React Router. React Router isn't always necessary, especially for things in which you really want to control the flow of the views that have to be shown.

https://gist.github.com/Alserda/150e6784f96836540b72563c2bf331d0