求助：React Router中实现箭头切换页面功能（附待完善代码）

嘿，我来帮你完善这个箭头导航的实现～你的需求是通过左右箭头切换菜单页面，核心得先定位当前激活的页面，再计算前进/后退的目标路径对吧？我帮你把代码补全，同时把关键逻辑讲清楚：

核心思路拆解 #

• 定位激活项索引：先在菜单列表里找到标记为active的项，拿到它的位置索引
• 计算前后路径：根据当前索引，分别算出后退（左箭头）和前进（右箭头）对应的路由路径
• 处理边界情况：比如第一个页面不能后退、最后一个页面不能前进，给这些状态的箭头加禁用样式，避免无效跳转

完整修改后的代码 #

import { useContext } from 'react';
import { NavLink } from 'react-router-dom';
import { menuContext } from './你的上下文文件路径'; // 记得替换成你实际的上下文路径

export const ArrowNav = () => {
  const menu = useContext(menuContext);
  
  // 一步定位当前激活项的索引，比for循环更简洁高效
  const currentActiveIndex = menu.findIndex(item => item.active);
  
  // 计算后退路径：当前索引大于0时取前一项路径，否则返回当前路径避免无效跳转
  const getPreviousPath = () => {
    if (currentActiveIndex > 0) {
      return menu[currentActiveIndex - 1].path; // 这里假设菜单项有path属性，不是的话替换成你的实际字段名
    }
    return menu[currentActiveIndex].path;
  };
  
  // 计算前进路径：当前索引小于菜单长度-1时取下一项路径
  const getNextPath = () => {
    if (currentActiveIndex < menu.length - 1) {
      return menu[currentActiveIndex + 1].path;
    }
    return menu[currentActiveIndex].path;
  };
  
  // 判断箭头是否需要禁用
  const isLeftArrowDisabled = currentActiveIndex === 0;
  const isRightArrowDisabled = currentActiveIndex === menu.length - 1;

  return (
    <div className="lmpixels-arrows-nav">
      {/* 左箭头：后退 */}
      <NavLink 
        to={getPreviousPath()}
        className={`${isLeftArrowDisabled ? 'arrow-disabled' : ''}`}
        onClick={(e) => isLeftArrowDisabled && e.preventDefault()} // 禁用时阻止跳转
      >
        <div className="lmpixels-arrow-left">
          <i className="lnr lnr-chevron-left"/>
        </div>
      </NavLink>

      {/* 右箭头：前进 */}
      <NavLink 
        to={getNextPath()}
        className={`${isRightArrowDisabled ? 'arrow-disabled' : ''}`}
        onClick={(e) => isRightArrowDisabled && e.preventDefault()}
      >
        <div className="lmpixels-arrow-right">
          <i className="lnr lnr-chevron-right"/>
        </div>
      </NavLink>
    </div>
  );
};

关键细节说明 #

• findIndex方法：直接遍历菜单数组找到激活项的索引，比你之前的for循环写法更简洁高效
• 边界处理：通过isLeftArrowDisabled和isRightArrowDisabled判断箭头状态，禁用时不仅加样式，还通过onClick阻止默认跳转行为
• 禁用样式：可以加个CSS类让禁用的箭头更直观：

  .arrow-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  

额外优化：循环导航（可选） #

如果你想实现循环切换（比如最后一页点前进回到第一页，第一页点后退回到最后一页），可以把路径计算改成这样：

const getPreviousPath = () => {
  const prevIndex = (currentActiveIndex - 1 + menu.length) % menu.length;
  return menu[prevIndex].path;
};

const getNextPath = () => {
  const nextIndex = (currentActiveIndex + 1) % menu.length;
  return menu[nextIndex].path;
};

这样就不用处理禁用状态，完全支持循环跳转～

内容的提问来源于stack exchange，提问作者Ерванд С-ян