React route to a specific Item details page from a All Items page-CodePudding

I have an Items page, where I want that if the user clicks on a specific item card, it will redirect the user to a new page where that specific item details will be displayed only.

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;

I tried to solve this problem using this refrence https://stackoverflow.com/questions/71010211/react-route-to-a-specific-product-details-page-from-a-product-page but not able to do it please help me with this

CodePudding user response：

You need to render routes for iconsList and IconDetail to be rendered on and linkable.

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 should render a link to the detail route path.

<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 should use the useParams hook to access the key route path param. Search the Data array for the matching icon element by key property. If there is no matching icon object then render null or redirect back, basically don't try to access into an undefined object.

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>
  );
}

CodePudding user response：

You need to give a Route to "Icondetail" component for example "/icons/:iconId" using React Router component called "Route" and then use the same route in Link like this: <Link to="/icons/icon.id"> in the IconList component and it'll redirect you to the IconDetail page upon clicking.