React 套件-路由 react-router-dom

路由 npm i react-router-dom@6.4.1

configuring-routes 官網

react-router 使用方法

確認自己記住了 React Router 從安裝到設定的方法。

在官網上找到實作的原型，並區分出需要客製化的段落。

說明 HomePage 和其他三條路由的關係。

• HomePage的path屬性是*，意思是除了路由切換 login, signup, todo頁面外，其他的路由字串都會導向HomePage。

Q1: 為什麼路由通常在後端設定？

路由在應用程式中扮演著將請求映射到特定端點或功能的角色。雖然在前端也存在一些路由處理機制，但在後端設定路由有幾個原因：

1. 統一控制: 後端路由可以統一管理應用程式中所有端點的路由。這樣的設計可以讓開發人員在後端掌握路由配置，確保端點間的一致性和統一性。

2. 安全性: 後端路由能夠控制對端點的訪問權限，實現安全訪問。這包括驗證和授權用戶對特定端點的訪問權限，確保敏感資源不被未授權的用戶訪問。

3. 伺服器渲染（SSR）: 在某些情況下，後端路由是實現伺服器渲染（SSR）的關鍵。透過後端路由配置，可以確保伺服器能夠根據路由來動態生成頁面內容，提供更好的性能和 SEO。

4. 兼容性: 某些情況下，特定端點的路由需要進行多種後續處理，例如從數據庫中擷取資料、處理業務邏輯等。這些操作通常需要在後端完成。

雖然後端路由控制著端點和資源的訪問，但現代 Web 應用程序中，前端路由（例如在 React 或 Vue 中）也扮演了重要角色。前端路由可以實現單頁應用（SPA）中的客戶端路由功能，使用戶能夠在應用程式中進行快速、無需重新加載頁面的導航。兩者通常協同工作，提供了更完整的應用程序路由解決方案。

Q2:在前端設定 Router 是什麼意思？

在前端設定 Router 意味著在客戶端（瀏覽器端）使用特定的 JavaScript 庫或框架來處理應用程式的路由。
常見於單頁應用（Single Page Application，SPA）(一頁式網頁)。

使用前端 Router 意味著應用程式的不同端點（URL）或路徑與特定的 UI 元件或頁面相關聯。當用戶在應用程式中進行導航時，前端 Router 會根據 URL 的變化，動態地渲染出對應的 UI 元件或頁面，而無需整個頁面的重新加載。

例如，在 React 中，你可以使用 React Router 來在前端設定路由。你會定義不同的 <Route>，每個 <Route>會與特定的 URL 或路徑相匹配，並指定要渲染的 React 元件。當用戶進行導航或 URL 變化時，React Router 會根據定義的路由規則動態地渲染對應的元件到應用程式中。

總之，在前端設定 Router 意味著利用客戶端的 JavaScript 處理應用程式的路由，使得用戶能夠在單頁應用中進行流暢的導航和視覺上的變化，而不需重新加載整個頁面。

Q3: 為什麼開啟 React Router 的文件，但在安裝套件時用的卻是 npm i react-router-dom ？

與 React Router 相關的三個主要套件，各提供不同的功能。

react-router: 主要提供 React Router 的核心功能，包括路由的定義、管理和hooks等。通常用於沒有 DOM 環境的情況下，例如 React Native 等。

react-router-native：包含 react-router 的所有功能，並添加了一些特定於 React Native 的 API。

react-router-dom: 這個套件建立在 react-router 之上 ( 即包含 react-router 的所有功能 )，提供了在網頁瀏覽器中使用 React Router 所需的額外功能，比如 <BrowserRouter>、<Link>、<Route> 等，用於建立路由和導航，添加了一些特定於 DOM 的 API，通常用於基於瀏覽器的 React 應用程式中。

React Router 是 React App 中用於在不同檢視元件之間進行路由的常見標準函式庫。它有助於將使用者介面與網址保持同步。此外，React Router 允許定義特定網址要顯示的檢視。

所以當你在開啟 React Router 的文件時，如果你的目標是建立基於瀏覽器的 React 應用程式，你應該安裝 react-router-dom 套件。這個套件提供在網頁App中使用 React Router 所需的功能和元件。

筆記連結
Single Page Applicationㄝ, SPA 一頁式網頁
SSR