¿Cómo puedo cambiar una ruta en mi componente reactJs menu.js de 1 ruta a otra dependiendo de una marca de tiempo? Por ejemplo, cuando sea el 1 de diciembre, cambiará lo siguiente:
De:
<Link to="/coming-soon">Coming Soon</Link>A:
<Link to="/store">Store</Link>Estoy usando un componente funcional para menu.js y no tengo mucha experiencia en ReactJs
ACTUALIZACIÓN: 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 /> </> );Puede establecer la ruta de la ruta dinámicamente cuando cambia la marca de tiempo, en ese momento puede usar como se muestra a continuación
<Link to="/${yourdynamicpath}">{Title}</Link>Editar: me doy cuenta de que desea agregar una verificación para actualizarlo sin actualizar, por lo que ajustaría el componente funcional para almacenar la primera fecha en una const [currentDate, setCurrentDate] = useState(new Date()) y dentro de la actualización useEffect que con un intervalo por ejemplo:
useEffect(() => { const interval = setInterval(() => { setCurrentDate(new Date()) }, 1000); // set this as you wish on how responsive you wish it to be return () => clearInterval(interval); }, []);Dependiendo de si ya tiene instalada una biblioteca de formato de fecha, la implementación exacta podría diferir, pero, por ejemplo, si usa date-fns , se le proporcionan muchas utilidades útiles como:
compareAsc(dateLeft, dateRight) que se puede usar así para comparar fechas, comparamos la fecha de hoy new Date() con el 1 de diciembre new Date('1/12/2021') , si la primera fecha es anterior a la segunda fecha, devuelve -1, por lo que la condición es verdadero y mostramos el próximamente, si es posterior devolvemos 1, la condición es falsa y luego mostramos la tienda:
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 /> </> )No es que se recomiende necesariamente obtener un paquete para todo, pero para las fechas, estos brindan muchas utilidades útiles, por lo que acostumbrarse a todo lo que tienen para ofrecer puede ser útil si aún no las ha visto.