Как я могу изменить маршрут в ReactJS в зависимости от метки времени?

#javascript #reactjs #components

Вопрос:

Как я могу изменить маршрут в моем ReactJS menu.js компонент с 1 маршрута на другой в зависимости от метки времени. Например, когда наступит 1 декабря, изменится следующее:

От:

 <Link to="/coming-soon">Coming Soon</Link>

Для:

 <Link to="/store">Store</Link>

Я использую функциональный компонент для menu.js , и у меня нет большого опыта в ReactJS

ОБНОВЛЕНИЕ: App.js

   return (
    <>
      <Menu />

      <Switch>
        <Route path="/" exact>
          <LandingPage />
        </Route>
        <Route path="/coming-soon" exact>
          <ComingSoon />
        </Route>
        <Route path="/store" exact>
          <Store />
        </Route>
    </Switch>

    <Footer />
    </>
  );

1. Не могли бы вы поделиться кодом, в котором вы реализовали маршрутизацию? или тот, который вы уже пытались достичь этого?

2. Проверьте обновленный вопрос, пожалуйста.

Ответ №1:

Вы можете динамически задавать путь маршрута при изменении метки времени, в это время вы можете использовать, как показано ниже

 <Link to="/${yourdynamicpath}">{Title}</Link>

1. Должен ли я использовать setInterval() для этого?

2. Нет необходимости использовать setInterval у вас может быть только одно состояние на уровне функциональных компонентов, и вы можете использовать это состояние всякий раз, когда ваша метка времени обновляется, и на основе этого состояния вы можете условно использовать динамический маршрут, как я уже говорил ранее

3. Я понимаю логику состояний, но моя точка зрения заключается в том, как я могу определить, что, например, отметка времени «Дата сейчас» стала равной (1638313200) без обновления на странице.

Ответ №2:

Правка: Я заметил, что вы хотите добавить чек, чтобы обновить его без обновления, поэтому я бы настроил функциональный компонент, чтобы сохранить первую дату в const [currentDate, setCurrentDate] = useState(new Date()) обновлении Useefect и в нем с интервалом, например:

 useEffect(() => {
  const interval = setInterval(() => {
     setCurrentDate(new Date())
  }, 1000); // set this as you wish on how responsive you wish it to be
  return () => clearInterval(interval);
}, []);

В зависимости от того, установлена ли у вас уже библиотека форматирования даты, точная реализация может отличаться, но, например, если вы используете date-fns, вам предоставляется множество полезных утилит, таких как:

 compareAsc(dateLeft, dateRight)

который можно использовать таким образом для сравнения дат, мы сравниваем сегодняшнюю дату new Date() с 1 декабря new Date('1/12/2021') , если первая дата до второй даты, она возвращает -1, поэтому условие истинно, и мы показываем в ближайшее время, если после того, как мы вернем 1, условие ложно, а затем мы показываем магазин:

  return (
  <>
    <Menu />
    <Switch>
      <Route path="/" exact>
        <LandingPage />
      </Route>
    </Switch>
    {compareAsc(currentDate, new Date("1/12/2021")) === -1 ? (
      <Route path="/coming-soon" exact>
        <ComingSoon />
      </Route>
    ) : (
      <Route path="/store" exact>
        <Store />
      </Route>
    )}
    <Footer />
  </>
)

Не то чтобы обязательно рекомендуется брать пакет для всего, но для дат они предоставляют множество удобных утилит, поэтому привыкание ко всему, что они могут предложить, может быть полезным, если вы их еще не видели!