rect-router-dom 4.0如何在js中控制跳转，url变化了，this.prop.children却没有更新

Question

主页面

// index.js
ReactDOM.render((
    <Router history={history}>
        <App>
            <Switch>
                <Route path='/home' component={home} />
                <Route path='/mudidi' component={mudidi} />
                <Route path='/zhuanti' component={zhuanti} />
                <Route path='/daren' component={daren} />
                <Route path='/zijiayou' component={zijiayou} />
            </Switch>
        </App>
    </Router>
    ), document.getElementById('root'));

页面1

在页面中js跳转是可以的

// view/mudidi.js

 go() {
    this.props.history.push('/home')
  }
<div  onClick={this.go.bind(this)}>mudidi</div>

组件navigator.js

组件中的js控制跳转 不行 报push is a undefined

// components/navigator.js

import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory()

class Navigation extends Component {
    goNav(item,index) {
        // 这两种方式都不行
        history.push('/' + item.path)
        this.props.history.push('/' + item.path) 
    }
    render() {
    let navHtml = this.props.navData.map((item, index)=> {
        let LinkClass = index === this.state.activeIndex ? 'active' : '';
            return <div key={index} className={'child ' + LinkClass} onClick={this.goNav.bind(this, item, index)}>
                    <span>{item.name}</span>
                </div>
        })
    }
}

Answer 1

你这样写法，Navigation的props是没有history属性的，需要通过withRouter这个高阶组件包一下Navigation：

import { withRouter } from 'react-router'

export default withRouter(Navigation);   //在其他地方使用包装后的组件

更多参考：https://reacttraining.com/rea...

Answer 2

你是想问没有this.props 方法？

goNav = (item,index) => {
   // 这两种方式都不行
   history.push('/' + item.path)
   this.props.history.push('/' + item.path) 
}

这样？

Answer 3

问题解决了吗