reactjs - React Router 5 - history.push() 不会渲染组件 - 没有错误

Question

我正在尝试使用useHistory()和渲染新组件useRouteMatch()并将数据作为道具history.push()向下传递ProductCard到该新组件。更改 URL，但页面上没有呈现任何内容。当我使用和访问道具时也会发生同样的情况。谁能帮帮我？谢谢！！！BeerDetailshistory.push()withRouterhistorymatch

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/

标签： reactjsreact-router