react.js - react-router4.0版本,路由变化,页面没有跳转
本文介绍了react.js - react-router4.0版本,路由变化,页面没有跳转的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
请教一下react-router 4.0版本的页面跳转问题,问题是,在页面开始装载根节点的组件,根组件是一个登陆页面,在登陆里面进行createBrowserHistory().push("/main")的操作,结果是url发生了变化,但是路由对应的组件没有出来,请问这是什么情况?
router相关代码如下:
const history = createBrowserHistory();
class DefaultLayout extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<div>{this.props.children}</div>
)
}
}
ReactDOM.render(
<Router history={history}>
<div>
<Route path="/" component={WrappedNormalLoginForm}/>
<Route path="/main" component={SiderDemo}/>
</div>
</Router>, document.getElementById("react-content")
)
登陆关键代码:
// js登陆方法
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
createBrowserHistory().push("/main");//装载路由
}
// ui代码
<Button type="primary" htmlType="submit" className="login-form-button">登录</Button>
解决方案
将createBrowserHistory().push("/path")用this.props替换
这篇关于react.js - react-router4.0版本,路由变化,页面没有跳转的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文