How to navigate to different components in react.js

I want to make reusable buttons Left arrow and Right arrow, on clicking them i can navigate to different components/pages. I am making a calendar, I want to achieve, on pressing these arrow buttons i can navigate to different months.
I can do this using Link tag on every component, but this will be violation of Don’t Repeat yourself principle. Is there any way to achieve this functionality by making Reusable button, where i don’t have to pass <Link to = “/path” in every components.

These are routes on App.jsx

 <Routes>
      <Route exact path='/' element={<HomePage />} />
      <Route exact path='/home' element={<HomePage />} />
      <Route path='nov2023' element={<SinglePage title='November 2023' />} />
      <Route path='dec2024' 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;

onClicking LA and RA i want to navigate to previous and next component/page.
ie. OnClick RA from November 2023 to December 2023