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.

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, Feb 03 '17 at 22:11
Jeff, I thought it will only navigate to /level once the submit button is pressed. How do I fix this? — Quesofat, Feb 03 '17 at 22:34
I had a similar issue. This helped me https://stackoverflow.com/a/52651670/10316348 — movcmpret, Jul 22 '19 at 20:10

score 1 · Accepted Answer · edited May 23 '17 at 10:29

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

I really appreciate your feedback. As far as what I'm trying to accomplish? I'm a react noob. This is my first react spa and I'm trying to build a where's waldo game. Ideally what happens is at onSubmit the username is stored in a state store to be used later and then redirects the player to pick a game level. — Quesofat, Feb 03 '17 at 23:14
You're welcome! React is definitely worth learning, it's just lots of fun once you get the hang of it. - What does your state.js currently look like? Do you have some kind of Git repo that I can look into? I personally use Redux for application-state related issues, but I wouldn't really recommend that if you really just begun as I think it's more important to learn the normal 'states' in React. I would probably recommend moving up the state. As in; You have a Game.js component with a state that holds the username and that decides which component to show (Home/Name/Level) — Alserda, Feb 03 '17 at 23:33

score 0 · Answer 2 · answered Feb 03 '17 at 21:55

0

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

answered Feb 03 '17 at 21:55

Josh

1,455
19
33

This causes an error:` Uncaught TypeError: Cannot read property 'getCurrentLocation' of undefined at Object.createTransitionManager (Router.js:111) at Object.componentWillMount (Router.js:118)` etc.. – Quesofat Feb 03 '17 at 22:01

score 0 · Answer 3 · answered Aug 15 '18 at 21:47

0

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

answered Aug 15 '18 at 21:47

s4ndhyac

576
6
10

React Router Renders Blank Page

3 Answers3