React Router 5-history.push（）不会渲染组件-没有错误

Question

我正在尝试使用useHistory()和useRouteMatch()和history.push()来渲染新组件并将数据从ProductCard向下传递到该新BeerDetails组件，道具。 history.push()更改了URL，但是页面上没有任何内容。当我使用withRouter并从道具访问history和match时，也会发生同样的情况。有人可以帮我吗？谢谢!!!

const ProductCard = ({ beer }) => {
  //REMOVED STUFF FOR BREVITY  

  let match = useRouteMatch({
    path: "/:beerId",
    url: "/",
  });

  let history = useHistory();

  const { name, tagline, abv, first_brewed, image_url, price, id } = beer;
  return (
    <div className="product-card">
      <div className="product-card-inner">
        <div
          className="product-info-container"
          onClick={() => history.push(`/${id}`)} // THIS ONE SEEMS TO WORK
        >
          <h1 className="beer-name">{name}</h1>
          <p className="beer-type">{tagline}</p>
          <p className="beer-alcohol">{abv}%</p>
          <p className="first-brewed">First brewed: {first_brewed}</p>
        </div>
        <div className="beer-image-container">
          <img src={image_url} alt="beer" />
        </div>
        <div className="price-container">
          <h1>£{price}</h1>
        </div>
        <div className="form-container">
          <form onSubmit={onSubmit}>
            //REMOVED FOR BREVITY
          </form>
        </div>
      </div>
      {match ? <BeerDetails beer={beer} /> : null} // THIS IS NOT DOING ANYTHING
    </div>
  );
};

export default ProductCard;

我试图遵循此指南： https://reacttraining.com/blog/react-router-v5-1/