如何根据时间戳更改 ReactJs 中的路由？

Question

如何根据时间戳将我的 reactJs menu.js 组件中的路由从 1 个路由更改为另一个路由。 例如，当它是 12 月 1 日时，以下内容将发生变化：

发件人：

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

收件人：

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

我正在使用 menu.js 的功能组件，我对 ReactJs 没有太多经验

更新： 应用.js

  return (
    <>
      <Menu />

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

    <Footer />
    </>
  );

Answer 1

编辑：我注意到您想添加一个检查以在不刷新的情况下对其进行更新，因此我将调整功能组件以将第一个日期存储在 const [currentDate, setCurrentDate] = useState(new Date()) 中并在 useEffect 中以间隔更新，例如：

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() 与 12 月 1 日new Date('1/12/2021') 进行比较，如果第一个日期早于第二个日期，则返回 -1，因此条件为真，我们显示即将推出，如果它在我们返回 1 之后，则条件为 false，然后我们显示商店：

 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 />
  </>
)

并不是说必须为所有东西都拉一个包 - 但对于日期，这些提供了许多方便的实用程序，因此如果您还没有看到它们，那么习惯它们所提供的一切可能会很有用！

Answer 2

您可以在更改时间戳时动态设置路由路径，届时您可以像下面这样使用

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