CODEWITHSUNDEEP
javascriptreactjsreact-router
Quesofat
Quesofat

Reputation: 1531

React Router Renders Blank Page

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.

Upvotes: 3

Views: 19991

Answers (3)

s4ndhyac
s4ndhyac

Reputation: 586

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

Upvotes: 0

Alserda
Alserda

Reputation: 4764

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

Upvotes: 1

Josh
Josh

Reputation: 1484

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

Upvotes: 0

Related Questions