前端路由之導航狀態 (React Hook - useNavigate)

發表於 | 分類於 | |

導航狀態常用於頁面間的資料傳遞
特別適合單向的數據傳遞(只管數據帶到下一頁,不管帶回上一頁)
使用上直觀且簡單
另外現代瀏覽器多半有緩存機制可以保存各頁面的狀態
即便客戶端進行 Reload, 或點擊上下頁依然可以保存狀態

應用上像是商品目錄頁進到商品內頁
可以藉由導航狀態先將部分資訊帶入內頁渲染
剩餘的資訊再藉由動態請求補齊
可以有效提升使用者體驗

底下以 React Router v6 為例
來說明導航狀態的實際應用：

  • useNavigate

useNavigate

這是一個頁面級別的元件代碼範例
包含接收來自上一頁的 state
和將 state 帶入新頁面的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const Page = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { state } = location;
  const [viewModel, setViewModel] = useState(state || {});

  const onNextPageClick = () => {
    const state = { data: 'example' };
    navigate("頁面路徑", { state });
  };

  const fetchPageData = async () => {
    try {
       const res = await fetch("url");
       const json = await res.json();
       const { data } = json;
       setViewModel(p => ({...p, ...data}))
    } catch (err) {
       console.log(err.message);
    }
  }

  useEffect(() => {
    fetchPageData()
  }, [])

  return (頁面JSX代碼);
}

從上面的代碼可以看到導航狀態來自於 location 的 state
可將其作為 viewModel 的預設值 之後主要用來更新視圖
當元件掛載完成後 便會觸發 fetchPageData 進行動態數據請求和視圖更新

如果需要將狀態帶入新頁面 則可以參考 onNextPageClick 函式

本文作者： David Huang
本文地址： https://davidblog.github.io/2023/07/12/navigate/

0%