尝试添加详细产品组件。反应路由器

Question

我有一个组件 products，它列出了 /Productsurl 中的所有产品。我正在尝试制作另一个在浏览器中显示特定 product 的组件 Detail。这就是我一直试图创建的 URL Detail/{some id goes here}。问题是我如何知道点击了哪个 product，那么我应该如何在 Detail 组件中显示这个特定的 product。我确实有一个 Detail 和 Products 组件。

我的路由器如下：

      <Router>
      <NavbarComponent></NavbarComponent>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route exact path="/home">
            <Home />
          </Route>
          <Route exact path="/Products">
            <Products />
          </Route>
          <Route exact path="/Detail/:int">
            <Detail />
          </Route>
        </Switch>
      </Router>

我不打算分享我的 Products 组件，因为它由 200 行代码组成。我只是要在我的 Products 中分享搜索 svg，我希望它在我单击时将我带到 Detail/{id} 页面。

        {filtered.map((product, index) => {
          return (
            <div key={index}>
              <div className="card shadow" style={{ width: "18rem" }}>
                <img
                  className="card-img-top"
                  src="https://dl.airtable.com/.attachmentThumbnails/65708b701baa3a84883ad48301624b44/2de058af"
                  alt="Card image cap"
                />
                <Link className="link" to={"Detail",index}>
                  <svg
                    stroke="currentColor"
                    fill="white"
                    stroke-width="0"
                    viewBox="0 0 512 512"
                    height="1em"
                    width="1em"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
                  </svg>
                </Link>

Answer 1

这就是您需要的 - https://reactrouter.com/web/example/url-params/

总而言之，:int 可以在 Detail 组件中用作 const {int} = useParams();。在处理 Products 组件中的点击时，您必须使用 Link 组件将产品 ID 作为 /Details/{productId} 传递。

以这种方式，一旦单击 Link 将路由带到 Detail/xyz-product-id，Detail 组件将呈现 xyz-product-id 可用的 int 在代码中。

尝试添加详细产品组件。反应路由器

Trying to add a detail product component. React-router

javascript

reactjs

react-router

react-component