react-router4.0版本，路由变化，页面没有跳转

Question

请教一下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>

Answer 1

将createBrowserHistory().push("/path")用this.props替换

Answer 2

看源码
node_modules/react-router-dom/BrowserRouter.js
摘取几行代码

  var _Router = require('react-router/Router');
  var _Router2 = _interopRequireDefault(_Router);
  BrowserRouter.prototype.render = function render() {
    return _react2.default.createElement(_Router2.default, { history: this.history, children: this.props.children });
  };
 // 而this.history的来源是/history/createBrowserHistory模块

所以
<BrowserRouter /> 其实就是 <Router history={history} />
不需要在外部写
import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory()

对应react-router4
简单写法是

import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
export class RouterMap extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/list">List</Link></li>
          </ul>
          <hr/>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/list" component={List} />
            <Route path="/detail/:id" component={Detail} />
            <Route component={NoMatch}/>
          </Switch>
        </div>
      </Router>
    );
  }
}

手动跳转，比如list页面跳转到detail页面

import React from 'react'

export default class List extends React.Component {
  constructor({ match }) {
    super();
    this.state = {
      match
    }
  }

  clickHandle(item) {
    this.props.history.push('/detail/' + item)
  }

  render() {
    const arr = [1,2,3]
    console.log(this.state.match)
    return (
      <div>
        <h3>List Page</h3>
        <ul>
          {
            arr.map((item, index) =>
              <li key={index} onClick={this.clickHandle.bind(this, item)}>{item}</li>
            )
          }
        </ul>
      </div>
    )
  }
}

Answer 3

初学，错误提示TypeError: Cannot read property 'props' of null，求问大神，是什么原因？

莫名其妙，好了。。。。真无语了。感谢楼主

Answer 4

react-router v4 路由history的问题看这里

https://github.com/brickspert...

Answer 5

遇到相同问题，请教题主如何解决的

Answer 6

可以看下你这个Demo吗？