reactjs 如何在react中导航到不同的组件,js

h6my8fg2 于 2023-04-29 发布在 React

关注(0)|答案(1)|浏览(112)

我想使可重复使用的按钮左箭头和右箭头，点击它们，我可以导航到不同的组件/页面。我正在做一个日历，我想实现，按下这些箭头按钮，我可以导航到不同的月份。我可以在每个组件上使用<Link to="/path">Link标签来做到这一点，但这将违反***不要重复自己***原则。有没有什么方法可以通过制作可重用的按钮来实现这个功能，而不必在每个组件中传递<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时，我想导航到上一个和下一个组件/页面，i.即从2023年11月至2023年12月点击RA

reactjs

来源：https://stackoverflow.com/questions/76134919/how-to-navigate-to-different-components-in-react-js

1条答案

按热度按时间

6jjcrrmo1#

我的建议是将所有月份数据加载到一个可以搜索的数组中。

const months = [
  {
    id: "nov2023",
    month: "November",
    path: "/nov2023",
    title: "November 2023"
  },
  {
    id: "dec2023",
    month: "December",
    path: "/dec2023",
    title: "December 2023"
  },
  ....
  {
    id: "nov",
    month: "November",
    path: "/nov",
    title: "November 2024"
  },
  {
    id: "dec",
    month: "December",
    path: "/dec",
    title: "December 2024"
  }
];

该数组将用于Map到HomePage***和***中的CalendarCard组件，作为查找实用程序函数来计算当前、下一个月和上一个月的数据。

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 ">
        {months.map((month) => (
          <CalenderCard month={month} key={month.id} />
        ))}
      </div>
    </div>
  );
};

const getMonthData = (current) => {
  const index = months.findIndex((month) => month.id === current);

  return {
    current: months[index],
    previous: months[index - 1],
    next: months[index + 1]
  };
};

SinglePage组件将读取新的month路由路径参数，并计算current、next和previous

const SinglePage = () => {
  const navigation = useNavigate();
  const { month } = useParams();

  const { current, next, previous } = getMonthData(month);

  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={current?.title} />
        <SootheSensesPara />
      </div>
      <div className="flex justify-end space-x-2 items-center sm:px-[50px] md:px-[100px]">
        <button
          type="button"
          onClick={() => navigation(previous?.path)}
          className="flex-0"
        >
          {"<<"}
        </button>
        <div className="flex-1">
          <BirdCard />
        </div>
        <button
          type="button"
          onClick={() => navigation(next?.path)}
          className="flex-0"
        >
          {">>"}
        </button>
      </div>
    </div>
  );
};

<Routes>
  <Route path="/" element={<Navigate to="/home" replace />} />
  <Route path="/home" element={<HomePage />} />
  <Route path="/:month" element={<SinglePage />} />
  <Route path="*" element={<NotFoundPage />} />
</Routes>

Demo

赞(0）回复(0）举报 2023-04-29

我来回答

reactjs 如何在react中导航到不同的组件,js

1条答案

Demo

相关问题

热门标签

最新问答