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屋！