# React Router 使用紀錄 1. 預設已經設置好基本react環境 2. npm add react-router-dom * 沒使用到react-router的所有功能,所以使用較輕量的react-router-dom 3. 會使用到的有Route、BrowserRouter、Switch、Redirect、Link * BrowserRouter * 較美觀的URL,相容性較HashRouter差一點點 * ![](https://i.imgur.com/S4xCLn0.png) * HashRouter * 帶#字號的URL,相容性較好 * Switch * 要切換內容的部份用Switch包住後就==不會==再往下尋找路徑 * Route * 在Switch中控制要顯示哪個pages * 與Link的to相對應 * Redirect * 預設的頁面 * Link * 基本的Link,類似取代a連結 * to 控制去到哪裡的路徑,與Route的path相對應 * NavLink * 有基本樣式的Link,此次使用中用來二次包裝的底板 * MyNavLink * ![](https://i.imgur.com/7Ey8XPG.png) * 統一樣式,方便使用的客製化Link 4. 為了避免BrowserRouter F5問題 * 在routes\web.php加入Route::view('/{path?}', 'index路徑'); * 5.