React Router Renders Blank Page

Question

Я создаю приложение для реагирования, а реагирующий маршрутизатор отображает черную страницу. Я googled вокруг и не могу показаться, чтобы понять, что происходит.

индекс

import React from 'react' 
import {render} from 'react-dom' 
import routes from './routes' 
render(routes, document.getElementById('root')) 

маршруты

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; 

компонент, который не делает, перемещаясь/имя

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 

Любая помощь будет оценена! PS Индекс маршрута работает отлично.

Answer 1

Какая дорога ./routes? У вас есть файл /routes/index.js, который состоит из кода, который вы указали для маршрутов?

Также я рекомендую вам использовать browserHistory вместо hashHistory для «нормального» URL-адреса, без хешей. Более подробную информацию о нем here

Для вашего класса Name Я бы порекомендовал вам использовать компонент более высокого порядка от React Router от withRouter. Это вводит «router» в качестве опоры внутри вашего компонента, поэтому вы можете использовать this.props.router.push('/path').

this.appState фактически ничего не делает прямо сейчас. Вы импортируете приложение appState, которое не трогается. Прямо сейчас вы устанавливаете appState в компоненте Name. Вы не хотите использовать this.setState({ username: e.target.value })?. Также лучше использовать onUpdateUser(e) { code } вместо функций стрелок для функции класса.

Я также вижу <form className="form-inline" onSubmit={this.onUpdateUser()}> - Я думаю, что при рендеринге этого компонента в данный момент вызывается onUpdateUser. Вместо этого вы должны сделать onSubmit={this.onUpdateUser}, поэтому функция вызывается при срабатывании onSubmit. Или onSubmit={e => this.onUpdateUser(e)}, обе вещи работают.

Что именно вы пытаетесь достичь с помощью этого кода?

---

Edit:

Я добавил суть, в которой я создал «введение - установить имя пользователя - выбрать уровень - остальное» поток без использования React маршрутизатора. React Router не всегда необходим, особенно для вещей, в которых вы действительно хотите контролировать поток представлений, которые должны отображаться.

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

Answer 2

Добавьте это в свой индексный файл. Возможно, вам придется использовать фактический Router от react-router.

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

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

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

ИЛИ

Использование ReactDom для react-dom вместо render.

import ReactDOM from 'react-dom'; 

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