要用react实现一个注册登录的前端,后台已经做好了,注册、登录的后台接口也有了。
刚进入页面,当然是未登录状态,很自然地点击注册按钮,进入注册页面,填写好注册信息,点提交,点击动作会触发handleClick()
函数,该函数源码如下:
handleClick() {
let data = {
username : this.state.username,
nick: this.state.nick,
password : this.state.password, //注册时传入的参数
}
fetch('http://www.foo.com/api/signup', { //这里就不显示真实url地址啦
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(data) //传入参数
})
.then(function(data) {
console.log('request succeeded with JSON response', data)
})
.catch(function(error) {
console.log('request failed', error)
})
};
根据console.log()
的输出,状态码是200,成功了。
然后我需要跳转到主页并且显示用户昵称,首先跳转需要有个动作,路由已经配置好了:
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="/home" component={Home} />
<Route path="/signup" component={SignUp} />
</Route>
路由跳转的动作应该怎么写?写在哪里?
谢谢
https://github.com/reactjs/react-router/tree/master/examples
中 auth-flow 和 auth-with-shared-root
或者用onEnter,onLeave事件
有两种实现方式
1.直接基于模块进行跳转
import { browserHistory } from 'react-router'
browserHistory.push('/some/path')
具体参考https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md#navigating-outside-of-components
2.基于当前的content的跳转
router.push('/users/12')
// or with a location descriptor object
router.push({
pathname: '/users/12',
query: { modal: true },
state: { fromDashboard: true }
})
具体参考https://github.com/reactjs/react-router/blob/master/docs/API.md#routercontext