使用 React-Router DOM 分页无法正常工作

Question

我正在尝试使用react-router-dom为名为“Shop”、Contact和Cart的组件实现分页。 为了存储 URL 路径，我使用了一个数组。 状态变量用作数组索引来检索特定路径。 useRef 用于存储特定路径，并在单击“下一个”或“上一个”按钮时更改它。

这里，每当单击 Next 或 Prev 时，都会先显示组件，然后更新状态变量。 因此，当我们在单击“下一步”后单击“上一个”时，将显示下一个组件。之后，如果我们再次单击“上一个”，则会显示上一个组件。

请提供解决方案或实现相同方案的替代方法。

import { Link } from "react-router-dom";
import { useRef, useState } from "react";
import "./bottombar.css";

const Bottombar = () => {
  const pathArray = ["shop","contact","cart"]
  const [array_index, setArrayIndex] = useState(0);
  const path = useRef("");
  const handleNext =() =>{
    if(array_index== pathArray.length-1)
      {
        setArrayIndex(0)
      }
      else{
        setArrayIndex(prev => prev+1)
      }
  }
  const handlePrev =() =>{
    if(array_index== 0)
      {
        setArrayIndex(pathArray.length-1)
      }
      else{
        setArrayIndex(prev => prev-1)
      }
  }
  path.current= pathArray[array_index];

  return (
    <div className="bottombar">
      <div className="links">
        <Link to={"/"+path.current} onClick={handlePrev}>Previous</Link>
        <Link to={"/"+path.current} onClick={handleNext}>Next</Link>
      </div>
    </div>
  );
};

export default Bottombar

Answer 1

单击链接时，您的组件将重新加载，因此您的状态甚至不会保存。

1. 无需状态或参考号。
2. 通过路径数组，您可以确定在加载组件时应在上一个和下一个链接上添加哪些链接。 use 可以从路径名（useHistory 或 usePathname 任何可用的）监听并将其与您的数组匹配。