![](/img/trans.png)
[英]How can I change data object in Vue component depending on route and using vue-route?
[英]How can I change a route in ReactJs depending on a timestamp?
如何根據時間戳將 reactJs menu.js 組件中的路由從一條路由更改為另一條路由。 例如,當它是 12 月 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 />
</>
);
您可以在更改時間戳時動態設置路由路徑,那時您可以像下面這樣使用
<Link to="/${yourdynamicpath}">{Title}</Link>
編輯:我注意到你想添加一個檢查來更新它而不刷新,所以我會調整功能組件以將第一個日期存儲在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 之后,條件為假然后我們展示商店:
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 />
</>
)
並不是說必須建議為所有事情都拉一個 package - 但對於約會,這些提供了很多方便的實用程序,所以如果你還沒有看到它們,那么習慣它們提供的所有東西可能會很有用!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.