React.js中实现可复用月份导航箭头按钮的方案咨询

完全可以实现无需重复传入<Link>的可复用箭头按钮，核心思路是把日期计算和导航逻辑封装到组件内部，只需要传入当前月份/年份即可，完美遵循DRY原则。

具体实现方案 #

1. 封装可复用箭头按钮组件 #

创建MonthNavArrow.jsx，内部处理日期增减和路由跳转逻辑，无需外部传入路径：

import { useNavigate } from 'react-router-dom';

const MonthNavArrow = ({ direction, currentYear, currentMonth }) => {
  const navigate = useNavigate();

  // 计算目标月份与年份
  const getTargetDate = () => {
    let targetMonth = currentMonth;
    let targetYear = currentYear;

    if (direction === 'left') {
      targetMonth -= 1;
      if (targetMonth < 0) {
        targetMonth = 11;
        targetYear -= 1;
      }
    } else {
      targetMonth += 1;
      if (targetMonth > 11) {
        targetMonth = 0;
        targetYear += 1;
      }
    }

    // 把月份索引转成英文名称（如11对应November）
    const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 
                        'July', 'August', 'September', 'October', 'November', 'December'];
    return { year: targetYear, monthName: monthNames[targetMonth] };
  };

  const handleNav = () => {
    const { year, monthName } = getTargetDate();
    // 适配你的路由格式，比如 /2023/November
    navigate(`/${year}/${monthName}`);
  };

  return (
    <button onClick={handleNav} className={`nav-arrow ${direction}-arrow`}>
      {direction === 'left' ? '←' : '→'}
    </button>
  );
};

export default MonthNavArrow;

2. 在页面组件中调用 #

无论是SinglePage还是其他月份页面，只需传入当前年份和月份索引（0-11）即可：

// SinglePage.jsx 示例
import { useParams } from 'react-router-dom';
import MonthNavArrow from './MonthNavArrow';

const SinglePage = () => {
  // 从路由参数获取当前年份和月份名称
  const { year, monthName } = useParams();
  const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 
                      'July', 'August', 'September', 'October', 'November', 'December'];
  const currentMonth = monthNames.indexOf(monthName);
  const currentYear = parseInt(year);

  return (
    <div className="month-page">
      <MonthNavArrow direction="left" currentYear={currentYear} currentMonth={currentMonth} />
      <h1>{monthName} {year}</h1>
      <MonthNavArrow direction="right" currentYear={currentYear} currentMonth={currentMonth} />
      {/* 日历内容区域 */}
    </div>
  );
};

export default SinglePage;

3. 适配路由配置 #

确保App.jsx的路由支持动态年份和月份参数：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomePage from './HomePage';
import SinglePage from './SinglePage';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        {/* 动态匹配年份和月份的路由 */}
        <Route path="/:year/:monthName" element={<SinglePage />} />
      </Routes>
    </Router>
  );
}

export default App;

方案优势 #

• 彻底规避重复代码：所有导航逻辑集中在箭头组件，页面无需重复写<Link>或跳转逻辑
• 维护成本低：后续如果路由格式变更，只需要修改箭头组件中的navigate路径即可
• 易用性强：页面组件只需传递当前日期参数，无需关心路由生成细节

内容的提问来源于stack exchange，提问作者Nishant Chaudhary