javascript - React-router中的this.props.history.push，url发生了变化，但是页面没有变化

问题描述

react-router是v4版本，代码如下

import React, { Component } from ’react’;import { BrowserRouter as Router, Switch, Route, Redirect, withRouter } from ’react-router-dom’;import ’./index.less’;import Work from ’./index/work’;import Info from ’./index/info’;class Index extends Component { constructor(props) {super(props); } handleRouterPush(path, e) {this.props.history.push(path); } render() {return ( <p><Router> <p><Switch> <Route exact path='/index'><Redirect from='/index' to='/index/work' /> </Route> <Route path='/index/work' component={ Work } /> <Route path='/index/info' component={ Info } /></Switch><p className='index-bottom'> <p onClick={ this.handleRouterPush.bind(this, ’/index/work’) }><p className='index-bottom-icon'> <span>工作</span></p> </p> <p onClick={ this.handleRouterPush.bind(this, ’/index/info’) }><p className='index-bottom-icon'> <span>个人</span></p> </p></p> </p></Router> </p>); }}export default withRouter(Index);

若是改成使用Link跳转则是可以的，但是this.props.history.push就不行了，请问这是为什么？

问题解答

我解决了。因为这个组件是在App.js中的Route加载的，我在App.js里面也使用了Router组件，似乎再在index.js里面使用Router组件就重复了。我把index.js里面的Router删了就好了

<Switch> <Route exact path='/index'><Redirect from='/index' to='/index/work' /> </Route> <Route **exact** path='/index/work' component={ Work } /> <Route **exact** path='/index/info' component={ Info } /></Switch>

试试