React中如何实现两个按钮切换并根据点击的按钮修改Navlink路径

你可以通过React的useState Hook维护当前选中的按钮类型，同时将该状态绑定到NavLink的to属性上，就能实现点击按钮切换选中状态+同步修改路由路径的需求，完整实现代码如下：

import { useState } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
// 引入你的图片资源
import singleLessonsType from './你的单课时图片路径';
import packageLessons from './你的打包课图片路径';

function LessonTypeSelect() {
  // 维护选中的课程类型，可选值：single / package
  const [selectedType, setSelectedType] = useState('single');
  // 如果需要点击按钮直接跳转可以用useNavigate，不需要的话可以删除
  const navigate = useNavigate();

  const lessonSelected = (type) => {
    setSelectedType(type);
    // 点击按钮直接跳转到对应路由的话打开下面这行注释
    // navigate(`/lesson/${type}`);
  };

  return (
    <div>
      <button 
        className={`lessonTypeButton ${selectedType === 'single' ? 'active' : ''}`}
      >
        <img
          src={singleLessonsType}
          alt="singleLessonsType"
          className="packageOne"
          onClick={() => lessonSelected('single')}
        />
      </button>

      <br /><br /><br />

      <button 
        className={`lessonTypeButton ${selectedType === 'package' ? 'active' : ''}`}
      >
        <img
          src={packageLessons}
          alt="packageLessons"
          className="packageTwo"
          onClick={() => lessonSelected('package')}
        />
      </button>

      <br /><br />
      {/* NavLink路由路径跟随选中状态动态变化 */}
      <NavLink to={`/lesson/${selectedType}`} className="nav-link">
        进入对应课程页
      </NavLink>
    </div>
  );
}

export default LessonTypeSelect;

切换效果样式补充：你可以在CSS中给选中的按钮添加高亮样式，示例：

.lessonTypeButton.active {
  border: 2px solid #1677ff;
  border-radius: 8px;
  /* 可自定义其他选中态样式 */
}

内容的提问来源于stack exchange，提问作者Lenroy D'souza