Javascript 如何导航到 react.js 中的不同组件

我想制作可重复使用的左箭头和右箭头按钮，单击它们可以导航到不同的组件/页面.我正在制作一个日历，我想实现的是，只要按下这些箭头按钮，我就可以导航到不同的月份. 我可以在每个组件上使用<Link to="/path">个Link标签来做到这一点，但这将违反103原则.有没有办法通过制作可重用的按钮来实现这一功能，这样我就不必在每个组件中都超过<Link to="/path">个？

这些是App.jsx上的路由

<Routes>
  <Route exact path='/' element={<HomePage />} />
  <Route exact path='/home' element={<HomePage />} />
  <Route path='nov2023' element={<SinglePage title='November 2023' />} />
  <Route path='dec2023' element={<SinglePage title='December 2023' />} />
  <Route path='jan' element={<SinglePage title='January 2024' />} />
  <Route path='feb' element={<SinglePage title='Febuary 2024' />} />
  <Route path='mar' element={<SinglePage title='March 2024' />} />
  <Route path='apr' element={<SinglePage title='April 2024' />} />
  <Route path='may' element={<SinglePage title='May 2024' />} />
  <Route path='jun' element={<SinglePage title='June 2024' />} />
  <Route path='jul' element={<SinglePage title='July 2024' />} />
  <Route path='aug' element={<SinglePage title='August 2024' />} />
  <Route path='sep' element={<SinglePage title='September 2024' />} />
  <Route path='oct' element={<SinglePage title='October 2024' />} />
  <Route path='nov' element={<SinglePage title='November 2024' />} />
  <Route path='dec' element={<SinglePage title='December 2024' />} />
  <Route path='*' element={<NotFoundPage />} />
</Routes>

import { useNavigate, useNavigation } from "react-router-dom";

const SinglePage = ({ title }) => {
  const navigation = useNavigate();
  return (
    <div className='h-screen px-2 bg-cyan-200'>
      <div className='flex flex-col items-center pt-20 space-y-5 text-center space-between'>
        <Logo />
        <MonthTitle title={title} />
        <SootheSensesPara />
      </div>
      <div className='flex justify-end space-x-2 items-center sm:px-[50px] md:px-[100px]'>
        <p onClick={() => navigation(-1)} className='flex-0'>
          **LA**
        </p>
        <div className='flex-1'>
          <BirdCard />
        </div>
        <p onClick={() => navigation(+1)} className='flex-0'>
          **RA**
        </p>
      </div>
    </div>
  );
};

export default SinglePage;

const HomePage = () => {
  return (
    <div className='bg-green-100 px-10 sm:px-[50px] md:px-[100px]'>
      <div className='pt-20 space-y-5 text-center '>
        <LogoSafex />
        <SootheSensesPara />
      </div>
      <div className='flex flex-col items-center justify-center space-y-5 '>
        <CalenderCard month='November' path='/nov2023' />
        <CalenderCard month='December' path='/dec2023' />
        <CalenderCard month='January' path='/jan' />
        <CalenderCard month='Febuary' path='/feb' />
        <CalenderCard month='March' path='/mar' />
        <CalenderCard month='April' path='/apr' />
        <CalenderCard month='May' path='/may' />
        <CalenderCard month='June' path='/jun' />
        <CalenderCard month='July' path='/jul' />
        <CalenderCard month='August' path='/aug' />
        <CalenderCard month='September' path='/sep' />
        <CalenderCard month='October' path='/oct' />
        <CalenderCard month='November' path='/nov' />
        <CalenderCard month='December' path='/dec' />
      </div>
    </div>
  );
};

export default HomePage;

在点击LA和RA时，我想导航到上一个和下一个组件/页面，即从2023年11月到2023年12月点击RA