Reactjs React 不会在路由参数更改或查询更改时重新加载组件数据

除了componentDidMount，您还需要在Products页中实现componentWillReceiveProps或使用getDerivedStateFromProps(从v16.3.0开始)，因为当您更改路由参数时，相同的组件是re-rendered，更新了params和not re-mounted，这是因为参数作为props 传递给组件，并且在props 更改时，React组件重新呈现，而不是重新安装.

v16的EDIT:.3.0使用getDerivedStateFromProps根据props 设置/更新状态(无需在两种不同的生命周期方法中指定)

static getDerivedStateFromProps(nextProps, prevState) {
   if (nextProps.match.params.product !== prevState.currentProductId){
      const currentProductId = nextProps.match.params.product
      const result = productlist.products.filter(obj => {

        return obj.id === currentProductId;

      })
     return {

        product: result[0],
        currentId: currentProductId,
        result

      }
  }
  return null;
}

v16之前的版本.3.0，你可以使用componentWillReceiveProps

componentWillReceiveProps(nextProps) {
    if (nextProps.match.params.product !== this.props.match.params.product) {
      const currentProductId = nextProps.match.params.product
      const result = productlist.products.filter(obj => {

        return obj.id === currentProductId;

      })
      this.setState({

        product: result[0],
        currentId: currentProductId,
        result

      })
    }
  }

100