如何在React JS中的其他组件中单击返回时保持当前页码处于活动状态。我有三个组件，第一个是设计组件，第二个是分页组件，第三个是项目细节组件。当我点击来自API的数据时，它使用ID并将我带到该特定ID的ItemDetails组件。在ItemDetails组件中，我创建了一个“返回”按钮。我想回到我点击ID的当前页面，但当我点击返回按钮时，它会将我带到第一页。
这里是我的设计组件，我想使用localStorage概念，但如何使用它？我不知道。

// /* eslint-disable react/prop-types */ // TODO: upgrade to latest eslint tooling
import "../src/App.css";
import axios from "axios";
import { useEffect, useState, useMemo } from "react";
import Pagination from "./Pagination";
import { Link } from "react-router-dom";

let PageSize = 2;

export default function Design() {
  const [search, setSearchTerm] = useState("all");
  const [records, setRecords] = useState([]);
  const [suggestions, setSuggestions] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);

useEffect(() => {
  const data = window.localStorage.getItem('pnum');
  console.log(`data is: ${data}`)
  if(data !== null) setCurrentPage(JSON.parse(data))
},[])

useEffect(() => {
window.localStorage.setItem('pnum', JSON.stringify(currentPage))
},[currentPage])

  const currentTableData = useMemo(() => {
    const firstPageIndex = (currentPage - 1) * PageSize;
    const lastPageIndex = firstPageIndex + PageSize;
    return records.slice(firstPageIndex, lastPageIndex);
  }, [currentPage, records]);

  useEffect(() => {
    searchRecords();
  }, []);

  const searchRecords = async () => {
    try {
      const res = await axios.get(`https://fruityvice.com/api/fruit/${search}`);
      setRecords(search === "all" ? res.data : [res.data]);
    } catch (error) {
      console.error("Error searching record:", error);
      setRecords([]);
    }
  };

  const fetchSuggestions = async (input) => {
    try {
      const res = await axios.get(`https://fruityvice.com/api/fruit/all`);
      const fruits = res.data.map((fruit) => fruit.name);
      const filteredSuggestions = fruits.filter((fruit) =>
        fruit.toLowerCase().includes(input.toLowerCase())
      );
      setSuggestions(filteredSuggestions);
    } catch (error) {
      console.error("Error fetching suggestions:", error);
      setSuggestions([]);
    }
  };

  const handleInputChange = (e) => {
    const inputValue = e.target.value;
    setSearchTerm(inputValue);
    fetchSuggestions(inputValue);
  };

  const getTotalNutritions = (item) => {
    return Object.values(item.nutritions).reduce(
      (total, value) => total + Math.trunc(value),
      0
    );
  };

  return (
    <>
      <h1 className="main--heading">Fruit Project</h1>
      <div className="main">
        <input
          className="input"
          onChange={handleInputChange}
          list="suggestions"
          placeholder="Search Fruit"
        />
        <datalist id="suggestions">
          {suggestions.map((fruit, index) => (
            <option key={index} value={fruit} />
          ))}
        </datalist>
        <button className="btn" onClick={searchRecords}>
          Search Fruit
        </button>
      </div>
      <div>
        <table>
          <thead>
            <tr>
              <th>Sr No</th>
              <th>Name</th>
              <th>Family</th>
              <th>Order</th>
              <th>Nutritions</th>
              <th>Genus</th>
            </tr>
          </thead>
          <tbody>
            {Array.isArray(currentTableData) && currentTableData.length > 0 ? (
              currentTableData
                .sort((a, b) => a.id - b.id)
                .map((item) => (
                  <tr key={item.id}>
                    <td>{item.id}</td>
                    {/* <td>{item.name}</td> */}
                    <td>
                <Link to={`/details/${item.id}`}>View Details</Link>
                    </td>
                    <td>{item.family}</td>
                    <td>{item.order}</td>
                    <td>{getTotalNutritions(item)}</td>
                    <td>{item.genus}</td>
                  </tr>
                ))
            ) : (
              <tr>
                <td>No data available</td>
              </tr>
            )}
          </tbody>
        </table>
        <Pagination
          className="pagination-bar"
          currentPage={currentPage}
          totalCount={records.length}
          pageSize={PageSize}
          onPageChange={(page) => {setCurrentPage(page)}
          }
        />
      </div>
    </>
  );
}

我的itemDetails组件是：

import { useParams } from 'react-router-dom';
import { Link } from 'react-router-dom';

const ItemDetails = () => {
  const { id } = useParams();   

  return (
    <div>
      <h2>Item Details</h2>
      <p>{`${id}:I am stuck there.`}</p>
      <Link  to={`/`} style={{ textDecoration: 'none' }}>Go Back</Link>

    </div>
  );
};

export default ItemDetails;