React-[路由篇]-SPAs與React Router （上）

這篇給自己複習是主要偏向理解，下篇主要讓自己多練習實做，路由需要下載插件，寫入import也會在元件之中穿梭，所以要讓自己多熟練就是透過實做與分析了～～

路由(routing)到底是什麼？為什麼要加入到我們的網頁？

網路到底是怎麼運作的呢？先看下面的例子：

這就是路由的意義，不同的路由會載入不同的內容頁面顯示
其實在還沒有接觸框架前，我們是以HTML頁面資料來請求加載不同url的內容頁面，比如說：/welcome 我們會做一個welcome.html檔案，然後，/products 我們還會再做一個products.html網站
這通常是我們還沒有接觸前端框架時，所練習的土法煉鋼法

以前的頁面切換時，每切換頁面就會發送一次http請求等待回應，再加載頁面

若是以現代人的耐心應該很難接受這種html網頁請求與回覆並加載的慢節奏～～～
這就是，為什麼需要SPA的開發

Single Page Applications（SPAs）/ 單頁式應用程式

其實我也一直不懂SPA專有名詞，在React學到路由，才真的比較明白為什麼需要React路由元件，為什麼需要建構SPA網頁如下：

我理解之後，我覺得路由可能就等同於“資源”，例如：我在“關於我”這個元件上，對應的路徑可能是“/aboutme”，從這個路徑來看，可以馬上的get到這個頁面(元件)就是“專門用來介紹自己的內容”的資源。

Router 有兩種路由表寫法：

AA.經典寫法 -> 元件管裡 -> BrowserRouter （伺服器端要另外處理）
BB.陣列管理 -> HashRouter -> 伺服器端不需要另外處理

下載React Router工具

其實React並沒有內建Router的功能，入門react也沒有能力可以自己寫Router工具，所以會需要安裝React其他開發者寫好的資源包/插件/庫-react-router-dom

什麼又是react-router-dom呢？

是React的路由庫工具，安裝這個插件可以幫助我們實現路由，也專門用來構建SPA單頁式應用程序的導航和路由功能。
基於React的元件化思維，允许我們可以以聲明的方式定義頁面之間的路由關係，將不同的頁面元件與特定的 URL 路徑產生連結，並在用户導航時動態加載和渲染这些頁面元件。

開發流程如下：

準備React Router環境
建立元件
匯入元件並撰寫路由表
加入對應的連結

A. 首先安裝react-router-dom這個插件

在terminal安裝react-router-dom這個插件：
$npm install react-router-dom
上面有敘述過，這個工具會協助我們管理與監控URL的變化，然後加載不同的頁面元件內容。

B. React Router:如何加入前端路由

我現在要練習將我寫的元件一個一個渲染到畫面上，先大致敘述接下來的開發流程：

以下是以BrowserRouter為例，最下面有HashRouter的示範

步驟0:加入 BrowserRouter：以下動作只要在每個專案上加入一次即可

0-1. BrowserRouter是react-routes的元件，這個只要在每個專案上加入一次即可
0-2. 打開index.js（有時也叫main.jsx，這個檔案就是“進入點”，在這裡的檔案都會被編譯)，在上方寫入：
0-3. 在main.jsx上方import BrowserRouter這個元件後，就繼續將這個元件標籤寫在下方，包裹這這個根元件，有點像讓App整個環境被瀏覽器路由器用關愛的方式緊緊包圍著，不讓你迷失方向XD