我正在构建一个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索引路由工作正常。
走的路是./routes
什么?您是否有一个/routes/index.js
文件,其中包含您为路由放置的代码?
另外,我建议您对“普通”网址使用browserHistory而不是hashHistory,而不要使用散列。有关此的更多信息
对于您的Name
班级,我建议您使用withRouter
React Router中的高阶组件。这会将' router
'作为props注入到组件内部,因此您可以使用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
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句