javascript - React-router v4 this.props.history.push(...) 不起作用

Question

我正在尝试使用 this.props.history.push(..) 以编程方式进行路由，但它似乎不起作用。

这是路由器:

import {
 BrowserRouter as Router,
 Route
} from 'react-router-dom';

<Router>
 <Route path="/customers/" exact component={CustomersList} />
 <Route path="/customers/:id" exact component="{Customer} />
</Router>

在 CustomerList 中，呈现客户列表。单击客户 (li) 应将应用程序路由至客户:

import { withRouter } from 'react-router'

class Customers extends Component {
  static propTypes = {
    history: PropTypes.object.isRequired
  }

 handleCustomerClick(customer) {
   this.props.history.push(`/customers/${customer.id}`);
 }

 render() {
   return(
    <ul>
      { this.props.customers.map((c) =>
        <li onClick={() => this.handleCustomerClick(c)} key={c.id}>
          {c.name}
        </li> 
    </ul>
  )

 }
}

//connect to redux to get customers

CustomersList = withRouter(CustomersList);
export default CustomersList;

该代码是部分的，但完美地说明了情况。 发生的情况是，浏览器的地址栏相应地更改为history.push(..)，但 View 没有更新，Customer 组件没有渲染，CustomersList 仍然存在。有什么想法吗？

Answer 1

所以我来到这个问题希望得到答案，但没有成功。我用过

const { history } = this.props;
history.push("/thePath")

在同一个项目中，它按预期工作。 经过进一步的实验和一些比较和对比，我意识到如果在嵌套组件中调用此代码，将不会运行。因此只有渲染后的页面组件才能调用该函数才能正常工作。

查找工作沙箱 here

• 历史记录:v4.7.2
• react :v16.0.0
• react-dom:v16.0.0
• react 路由器-dom: v4.2.2