React Router渲染空白页

Question

我正在构建一个React应用程序，而React Router呈现一张黑页。 我已经四处搜寻，似乎无法弄清楚发生了什么。

指数

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;

导航/ 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

任何帮助将不胜感激！PS索引路由工作正常。

Answer 1

./routes的路径是./routes ？ 您是否有一个/routes/index.js文件，该文件包含为路由放置的代码？

另外，我建议您将浏览器历史记录而不是hashHistory用于“常规” URL，且不使用哈希。 有关此的更多信息

对于您的Name类，我建议您使用React Router中的withRouter高阶组件。 这会将“ router ”作为道具注入到组件内部，因此您可以使用this.props.router.push('/path') 。

this.appState实际上现在什么都不做。 您正在导入未被触摸的“ appState”。 现在，您要在“名称”组件中设置“ appState”。 您不是要使用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)} ，两者都起作用。

您到底想用此代码实现什么？

---

编辑：

我添加了一个要点，即在不使用React Router的情况下创建了“介绍-设置用户名-选择级别-休息”流程。 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'));

Answer 3

要将其用于最新版本的react-router（v4），您需要使用一个switch元素。