如何在ReactJs的menu.js功能组件中根据时间戳切换路由

核心实现逻辑 #

你已经在App.js中完成了两个路由的注册，只需要在Menu功能组件中添加日期判断逻辑即可，完整的Menu.js代码示例如下：

import { Link } from 'react-router-dom';

const Menu = () => {
  // 配置目标切换日期：注意JS中月份从0开始计数，11代表12月
  // 如果需要固定某一年的12月1日，写法为 new Date(2024, 11, 1)
  // 如果需要每年12月1日自动切换，用以下动态写法
  const currentYear = new Date().getFullYear();
  const switchDate = new Date(currentYear, 11, 1);
  const now = new Date();
  // 判断是否已到切换时间
  const shouldShowStore = now >= switchDate;

  return (
    <nav>
      {/* 其他菜单内容 */}
      {shouldShowStore ? (
        <Link to="/store">Store</Link>
      ) : (
        <Link to="/coming-soon">Coming Soon</Link>
      )}
      {/* 其他菜单内容 */}
    </nav>
  );
};

export default Menu;

可选优化：防止未到时间直接访问/store路由 #

如果需要避免用户手动输入/store地址提前访问页面，可以修改App.js中的路由配置，添加重定向逻辑：

import { Switch, Route, Redirect } from 'react-router-dom';

// ...其他代码

return (
  <>
    <Menu />

    <Switch>
      <Route path="/" exact>
        <LandingPage />
      </Route>
      <Route path="/coming-soon" exact>
        <ComingSoon />
      </Route>
      <Route path="/store" exact>
        {/* 此处日期判断逻辑和Menu组件保持一致即可 */}
        {new Date() >= new Date(new Date().getFullYear(), 11, 1) ? (
          <Store />
        ) : (
          <Redirect to="/coming-soon" />
        )}
      </Route>
    </Switch>

    <Footer />
    </>
);

注意：以上判断基于用户本地时间，如果需要更高的准确性，可以从后端接口获取服务器时间做判断，避免用户修改本地时间绕过限制。

内容的提问来源于stack exchange，提问作者Joe