全端筆記

留下學習的痕跡

0%

React — React Router

發表於 分類於 Disqus：

React — React Router

什麼是 React Router ?

在傳統的網頁裡，如果瀏覽器要改變頁面，都必須要向伺服器發出請求 (request) 來要到相對應的資源內容，然後再去渲染新的頁面，但每當使用者按下一個連結，就會重新再刷新的動作其實會造成使用者體驗不是太好。
於是，React router 為了改善這個現象，他可以讓網頁在不透過跟伺服器請求 (request) 的動作下，就算更改網址路徑也可以即時更新頁面，大大提升使用者瀏覽網站的體驗 !

為何要使用 React Router DOM ?

  • 支援度廣、彈性大
  • 社群生態廣
  • 更多好用的方法
  • 全部都是 ReactJS 元件

為什麼前端網頁需要路由應用 ?

前端網頁的路由器，就是網際網路中路由應用的縮影

  • 優化 SPA(Single Page Application) 單頁式應用
  • 更好管理顯示內容
  • 更好辨識頁面意圖
  • 更方便做網頁快取
  • 優化 SEO

安裝 react-router-dom

Step1. 打開終端機並下載 react-router-dom

1
npm i react-router-dom

Step2. 在 index.js 載入 BrowserRouter，並使用 <BrowserRouter></BrowserRouter> 放在 <App /> 之間

1
2
3
4
5
6
7
8
9
10
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

Step3. 在 App.js 載入 react-router-dom，並定義會用到的元件，我們將會去使用他們

1
import { Route, Routes, Link, NavLink } from 'react-router-dom';

React Router 元件使用方式

Routes 和 Route

React Router 的 Hooks

useNavigate

useLocation

useParams

useSearchParams

useSubmit

認識 History PushState API

每次變化都會被記錄在 history stack 中，因此可以操作瀏覽器原生歷史紀錄

history.pushState(state: object, URL: string)

  • state — 可以記錄一個物件當歷史紀錄
  • title — 改變網頁標題 (支援度低)
  • URL — 改變網址路徑 (直接改變而不重新整理)

🔎 參考資料