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='/' ponent={Home} />
    <Route path='/name' ponent={Name} />
  </Router>
);

export default routes;

ponent 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.

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='/' ponent={Home} />
    <Route path='/name' ponent={Name} />
  </Router>
);

export default routes;

ponent 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.

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Feb 3, 2017 at 22:02 Quesofat asked Feb 3, 2017 at 21:50 QuesofatQuesofat 1,53133 gold badges2525 silver badges5252 bronze badges 4

• 1 It looks like you're navigating to /level (a non-existent route) instead of /name. Check your browser's error console and see if you're getting an error like: "Warning: [react-router] Location "/level" did not match any routes" – Jeff McCloud Commented Feb 3, 2017 at 22:11
• Jeff, I thought it will only navigate to /level once the submit button is pressed. How do I fix this? – Quesofat Commented Feb 3, 2017 at 22:34
• Change to onSubmit={(e) => this.onUpdateUser(e)} – Jeff McCloud Commented Feb 4, 2017 at 0:09
• I had a similar issue. This helped me stackoverflow./a/52651670/10316348 – movcmpret Commented Jul 22, 2019 at 20:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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 remend that you use browserHistory instead of hashHistory for 'normal' url's, without hashes. More info about that here

For your Name class I would remend you to use the withRouter Higher Order Component from React Router. This injects 'router' as a prop, inside of your ponent, 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 ponent. 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 ponent. 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./Alserda/150e6784f96836540b72563c2bf331d0

Add this to your index file. You might need to use the actual Router from react-router.

//Import Dependencies.
import { Router } from 'react-router';

//Import Routes.
import routes from './routes/routes.js';

render(<Router routes={routes} />, document.getElementById('root'))

OR

Use ReactDom for react-dom instead of render.

import ReactDOM from 'react-dom';

ReactDom.render(<Router routes={routes} />, document.getElementById('root'));

To use this with current versions of react-router (v4) you need to use a switch element.