iT邦幫忙

0

關於用react-router-dom的問題

新學react真的很多東西搞不懂...
目前用react-router-dom來做頁面的切換,整體資料是用包起來的,主要的頁面是App.js,裡面寫完共用的header跟footer後再把要切換的頁面用包起來放在中間做切換,默認的'/'是顯示home.js的頁面,以下幾個問題想請教:
1.因為在開啟頁面的時候我會先用fetch去抓一些資料來建構共用的頁面,這一塊是寫在最上層的app.js

  useEffect(() => {
    dataFetch('refIcons', setRefIcons) //抓圖形要用的資料
    dataFetch('simstatus', setSimstatus) //抓simstatus要用的資料
    dataFetch('loginStatus', setLoginStatus) //抓loginstatus要用的資料
  }, []);

想問的是,當我正常的從 http://localhost:3000/ 開始進入網頁的時候就會正常抓資料,切換頁面抓到的資料也都還在,但如果我用網址直接開啟其他頁面,如直接打http://localhost:3000/setting 或者用location.href的方式做切換時,就不會觸發寫在上層app.js的useEffect資料,而且原先有抓過的資料也換消失,這部份想請問一般如果有全局要用的如登入狀態之類的資料要抓的時候,通常會怎麼寫才能有用?

2.承上問,還是說react-router-dom裡面有內建其他的通過js指令的跳轉方式嗎?若沒有就會考慮在每個頁面元件都寫一個如果是初次進入就直接強制跳轉到首頁的函式。

3.關於全局要一開始就抓的資料,用useEfect綁定的是否適當?

抱歉很多問題,還請不吝賜教

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
Andy Chang
iT邦研究生 4 級 ‧ 2021-03-18 13:52:52
  1. 登入資料一般習慣會放在cookie。
  2. 你可以使用react-router-dom提供的<Link></Link>useHistory來操作前端路由切換頁面。 https://reactrouter.com/web/api/Hooks
  3. 一般會把全局資料放在context或是react-redux

另外建議可以去了解以下相關的知識: client-side-render(CSR)、single page application(SPA)、前端路由

感謝~資料的部份主要因為之前沒碰過react...想說層數只有兩層就把全局資料用props直接傳,我再去熟悉一下context看看

我要發表回答

立即登入回答