重新加载或重新渲染反应子组件

Question

我在使搜索功能做出反应时遇到麻烦，不是功能本身，而是重定向方式。在我尝试使用重定向之前，它不会加载父组件。没有解决方案，然后我使用Link to而不是redirect to更改逻辑。现在的问题是子组件不会重新呈现，唯一的变化就是URL。

这是完整的代码。

子组件：

class Search extends Component {
  state = {
    products: [],
    count: '',
  }

  componentDidMount() {
    window.scrollTo(0, 0)
    const { match: { params } } = this.props;
    axios.get('http://localhost:8000/api/v1/cari/' + params.userId)
      .then(response => {
        this.setState({ products: response.data.data, count: response.data.jumlah });
      })
  }

  componentWillReceiveProps(props) {
    this.forceUpdate();
    this.setState({ diCari: this.state.diCari });
  }

  render() {
    var jumlah = <div className="judul cari">Menampilkan {this.state.count} Produk</div>;
    var { products } = this.state;
    var hasil = products.map(products => {
      <div className="kotakproduk produkcari" />
    })

    return (
      <div>
        <div className="gambarproduk">
          <img src="https://www.mobiledokan.co/wp-content/uploads/2019/09/Xiaomi-Mi-9-Pro-Dream-White.jpg" />
        </div>
        <div className="nama">
          {products.merk} {products.tipe}
        </div>
        <div className="harga">
          <NumberFormat value={products.harga} displayType={'text'} thousandSeparator={true} prefix={'Rp. '} />
        </div>
      </div>
    )
  }
}

父项

class Master extends Component {
  state = {
    cari: '',
    diCari: false
  };

  handleChange1 = (e) => {
    this.setState({
      cari: e.target.value
    })
  }

  render() {
    return (
      <div>
        <div className="header">
          <Link to="/home">
            <div className="logo">
              <img src="/img/tokopon2.png" />
            </div>
          </Link>
          <input type="text" name="search" placeholder="Search.." onChange={this.handleChange1} />
          <Link to={"/search/" + this.state.cari}><button type="submit"><i className="fa fa-search"></i></button></Link>
          <div className="login-button">
            <Link to="/login">Login</Link>
            <div className="keranjang-mobile">
              <a href="#">
                <span className="glyphicon glyphicon-shopping-cart"></span>
              </a>
            </div>
            <div className="keranjang">
              <a href="#" className="btn btn-info btn-lg">
                <span className="glyphicon glyphicon-shopping-cart"></span> Keranjang Belanja
                 </a>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

我已经尝试过history.push仍然没有变化