reactjs 从“所有项目”页面响应到特定项目详细信息页面的路由

gcmastyq 于 2023-01-08 发布在 React

关注(0)|答案(2)|浏览(153)

我有一个项目页，我希望如果用户点击特定的项目卡，它会将用户重定向到一个新的页面，在那里特定的项目细节将只显示。
iconsList.jsx

import React from "react";
import "./IconsList.scss";
import { Data } from "../../Data/iconsData";
import { Link } from "react-router-dom";

function iconsList() {
  const searchIcon = () => {
    const searchBar = document.getElementById("x__iconsSearchBar");
    const iconsList = document.getElementById("x__iconsList");
    const listItem = iconsList.getElementsByTagName("li");
    const listFilter = searchBar.value.toUpperCase();

    searchBar.value == ""
      ? (iconsList.style.justifyContent = "space-between")
      : (iconsList.style.justifyContent = "flex-start");

    for (let i = 0; i < listItem.length; i++) {
      let iconName = listItem[i].getElementsByTagName("span")[0];
      let txtValue = iconName.textContent || iconName.innerText;

      txtValue.toUpperCase().indexOf(listFilter) > -1
        ? (listItem[i].style.display = "flex")
        : (listItem[i].style.display = "none");
    }
  };
  return (
    <div id="x__iconsFeild">
      <div className="d-flex align-items-center justify-content-between gap-3 py-3">
        <h2>Icons</h2>
        <div className="inputFeild d-grid border border-dark rounded p-1">
          <input
            type="text"
            onKeyUp={searchIcon}
            id="x__iconsSearchBar"
            placeholder="Search for icons..."
          />
          <div className="rounded"></div>
        </div>
      </div>
      <ul id="x__iconsList" className="d-flex align-items-start flex-wrap p-0">
        {Data.map(({ key, iconName }) => (
          <li key={key} className="list-unstyled">
            <Link to="">
              <div className="iconWrapper p-2 align-items-center justify-content-center border rounded shadow">
                {iconName}
              </div>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default iconsList;

iconDetail.jsx

import React from "react";

function IconDetail(props) {
  const name = props.Data;
  return (
    <div className="d-flex align-items-center justify-content-center m-2 p-2 bg-success">
      {name}
    </div>
  );
}

export default IconDetail;

Data.jsx

export const Data = [
  { key: "01", iconName: "Item 1" },
  { key: "02", iconName: "Item 2" },
  { key: "03", iconName: "Item 3" },
  { key: "04", iconName: "Item 4" },
  { key: "05", iconName: "Item 5" },
  { key: "06", iconName: "Item 6" },
  { key: "07", iconName: "Item 7" },
  { key: "08", iconName: "Item 8" },
  { key: "09", iconName: "Item 9" },
  { key: "10", iconName: "Item 10" },
];

App.jsx

import IconsList from "./Components/IconsBlock/IconsList/IconsList";
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <div className="px-md-5 px-sm-4 py-4 p-3">
        <IconsList />
      </div>
    </BrowserRouter>
  );
}

export default App;

我试图解决这个问题使用这个refrence https://stackoverflow.com/questions/71010211/react-route-to-a-specific-product-details-page-from-a-product-page，但无法做到这一点，请帮助我与此

reactjs

来源：https://stackoverflow.com/questions/75023164/react-route-to-a-specific-item-details-page-from-a-all-items-page

2条答案

按热度按时间

68bkxrlz1#

您需要渲染iconsList和IconDetail的路线，以便在其上进行渲染和链接。

import { BrowserRouter, Routes, Route } from "react-router-dom";

...

function App() {
  return (
    <BrowserRouter>
      <div className="px-md-5 px-sm-4 py-4 p-3">
        <Routes>
          <Route path="/" element={<IconsList />} />
          <Route path="/icons/:key" element={<IconDetail />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

IconsList应呈现指向详细路由路径的链接。

<ul id="x__iconsList" className="d-flex align-items-start flex-wrap p-0">
  {Data.map(({ key, iconName }) => (
    <li key={key} className="list-unstyled">
      <Link to={`/icons/${key}`}>
        <div className="iconWrapper p-2 align-items-center justify-content-center border rounded shadow">
          {iconName}
        </div>
      </Link>
    </li>
  ))}
</ul>

IconDetail应该使用useParams钩子来访问key路由路径参数。通过key属性在Data数组中搜索匹配的icon元素。如果没有匹配的icon对象，则呈现null或重定向回来，基本上不要尝试访问未定义的对象。

import { useParams } from 'react-router-dom';
import { Data } from "../../Data/iconsData";

...

function IconDetail() {
  const { key } = useParams();

  const icon = Data.find(icon => icon.key === key);

  if (!icon) return null;

  return (
    <div className="d-flex align-items-center justify-content-center m-2 p-2 bg-success">
      {icon.name}
    </div>
  );
}

赞(0）回复(0）举报 2023-01-08

4zcjmb1e2#

您需要使用名为“Route”的React Router组件为“Icondetail”组件（例如“/icons/：iconId”）给予一个Route，然后在Link中使用相同的路由，如下所示：<Link to="/icons/icon.id">，单击后将重定向到IconDetail页面。

赞(0）回复(0）举报 2023-01-08