React Router呈现空白页面

我正在构建一个反应应用程序,反应路由器呈现黑页 . 我用Google搜索,似乎无法弄清楚发生了什么 .

指数

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索引路线工作正常 .

回答(3)

2 years ago

./routes 的路径是什么?你有一个 /routes/index.js 文件,其中包含你为路线提供的代码吗?

另外,我建议您使用browserHistory而不是hashHistory来使用'normal' url,而不使用哈希 . 有关更多信息here

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

this.appState 现在实际上什么也没做 . 你被触摸了're importing ' appState ' that isn' . 现在你're setting ' appState ' within the Name component. Don' t你的意思是使用 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

2 years ago

将其添加到索引文件中 . 您可能需要使用 react-router 中的实际 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'));

2 years ago

要在当前版本的react-router(v4)中使用它,您需要使用switch元素 .