舉報 
會員
深入理解React Router：從原理到實踐
本書從基礎內容出發，詳細梳理了瀏覽器的基礎導航能力、history庫的使用及原理，以及ReactHooks等基礎知識，幫助讀者學習并掌握ReactRouter的前驅知識。同時，本書從ReactRouter的發展歷程、技術演變出發，介紹了ReactRouter的設計思路，并通過路由器、路由端口、導航三要素，引出ReactRouter的基本使用方法，并對源碼進行了全面解析。此外，本書各章使用ReactHooks穿插了30余個案例，在兼顧實用性、可擴展性的同時，為讀者學習與理解ReactRouter提供了全面豐富的素材。通過閱讀本書，讀者不僅可以融會貫通地掌握ReactRouter，而且能提升對前端路由的認識，并掌握前端領域路由的設計思路與方法。本書適合有JavaScript或TypeScript基礎，想要學習使用ReactRouter，或對ReactRouter實現原理和工程實踐感興趣的開發者閱讀。
- 附錄A 從React Router v3.x遷移到React Router v4.x及以上版本 更新時間：2021-04-16 16:11:39
- 參考文獻
- 9.15 小結
- 9.14.4 頁簽棧維護
- 9.14.3 使用頁簽組件
- 9.14.2 導航
- 9.14.1 路由配置
- 9.14 配置化路由綜合示例
- 9.13.2 重新實現配置化路由
- 9.13.1 配置化路由與react-router-config
- 9.13 配置化路由擴展
- 9.12.2 實現示例
- 9.12.1 微服務介紹
- 9.12 微服務路由
- 9.11.2 實現useHookRoutes
- 9.11.1 通過React Hooks獲得路由組件
- 9.11 在React Hooks中使用路由
- 9.10.3 頁簽實現
- 9.10.2 頁簽配置
- 9.10.1 頁簽介紹
- 9.10 路由與頁簽機制
- 9.9.2 為組件賦予路由
- 9.9.1 為組件加入path屬性
- 9.9 組件路由化
- 9.8.3 實現history中間件
- 9.8.2 中間件定義
- 9.8.1 Redux中間件
- 9.8 為history方法引入前置中間件
- 9.7.3 路由結合BreadCrumb組件
- 9.7.2 路由結合Modal組件
- 9.7.1 路由結合Tabs組件
- 9.7 路由與組件的結合實戰
- 9.6 React Router狀態同步Mobx
- 9.5.2 connected-react-router原理分析
- 9.5.1 接入connected-react-router
- 9.5 React Router狀態同步Redux
- 9.4.2 實現路由生命周期高階組件
- 9.4.1 路由生命周期
- 9.4 為組件引入路由生命周期
- 9.3.2 異步數據加載
- 9.3.1 頁面加載
- 9.3 為路由引入hash定位
- 9.2.2 導航感知
- 9.2.1 提升history方法
- 9.2 異步history方法
- 9.1.5 多次嘗試機制
- 9.1.4 滾動恢復執行者ScrollElement
- 9.1.3 滾動管理者ScrollManager
- 9.1.2 容器元素滾動恢復
- 9.1.1 scrollRestoration
- 9.1 路由組件的滾動恢復
- 第9章 進階實戰案例
- 參考文獻
- 8.7 小結
- 8.6.4 不銷毀未命中路徑組件的擴展Switch
- 8.6.3 404頁面
- 8.6.2 Prompt組件
- 8.6.1 路由動畫
- 8.6 實戰案例
- 8.5 matchPath
- 8.4 withRouter
- 8.3 Prompt
- 8.2.3 源碼解析
- 8.2.2 條件跳轉
- 8.2.1 基本跳轉
- 8.2 Redirect
- 8.1.2 Switch源碼解析
- 8.1.1 Switch簡介
- 8.1 Switch
- 第8章 其他路由組件及方法
- 參考文獻
- 7.6 小結
- 7.5.4 為導航組件擴展search和hash支持
- 7.5.3 相對上下文路徑的導航方法
- 7.5.2 相對上下文路徑導航組件
- 7.5.1 為導航組件擴展路由匹配
- 7.5 導航實戰案例
- 7.4 BackButton
- 7.3 DeepLinking
- 7.2.3 NavLink源碼解析
- 7.2.2 轉義特殊字符
- 7.2.1 帶激活態的Link
- 7.2 NavLink
- 7.1.2 Link源碼解析
- 7.1.1 Link的定義及屬性
- 7.1 Link介紹
- 第7章 Link
- 參考文獻
- 6.8 小結
- 6.7.8 Route中的代碼拆分
- 6.7.7 query及命名參數
- 6.7.6 Route渲染組件的可訪問性支持
- 6.7.5 緩存Route
- 6.7.4 默認子組件Route
- 6.7.3 重定向Route
- 6.7.2 相對路徑Route
- 6.7.1 嵌套Route
- 6.7 Route實戰案例
- 6.6.2 useParams
- 6.6.1 useRouteMatch
- 6.6 相關Hooks
- 6.5.2 運行流程
- 6.5.1 上下文的更新
- 6.5 Route 源碼解析
- 6.4.4 sensitive
- 6.4.3 strict
- 6.4.2 exact
- 6.4.1 location
- 6.4 Route的其他配置
- 6.3.3 history
- 6.3.2 location
- 6.3.1 match
- 6.3 Route傳入組件的3個參數
- 6.2.2 Route的第二個要素：組件渲染方式
- 6.2.1 Route的第一個要素：path
- 6.2 Route的兩個基本要素
- 6.1 Route是什么
- 第6章 Route
- 參考文獻
- 5.8 小結
- 5.7.3 useLocation
- 5.7.2 useHistory
- 5.7.1 useRouterContext
- 5.7 相關Hooks
- 5.6 StaticRouter
- 5.5 NativeRouter
- 5.4 HashRouter
- 5.3 BrowserRouter
- 5.2.3 提前監聽
- 5.2.2 提供初始Context
- 5.2.1 history監聽
- 5.2 Router源碼解析
- 5.1 Router是什么
- 第5章 Router
- 4.5 小結
- 4.4 使用React Router實現一個工程應用
- 4.3 靜態路由與動態路由
- 4.2 React Router版本的演進
- 4.1 ReactRouter是什么
- 第4章 認識React Router
- 參考文獻
- 3.5 小結
- 3.4 Memo
- 3.3.2 forwardRef
- 3.3.1 createRef
- 3.3 Refs
- 3.2.7 自定義Hook
- 3.2.6 useContext
- 3.2.5 useMemo
- 3.2.4 useRef
- 3.2.3 useLayoutEffect
- 3.2.2 useEffect
- 3.2.1 useState
- 3.2 Hooks
- 3.1 Context
- 第3章 React相關知識
- 參考文獻
- 2.8 小結
- 2.7 使用history替換頁面search和hash示例
- 2.6.2 decodeURI解碼問題
- 2.6.1 history.block的使用限制
- 2.6 history庫限制
- 2.5.5 history.block原理解析
- 2.5.4 hashHistory事件處理
- 2.5.3 browserHistory事件處理
- 2.5.2 history模擬歷史棧
- 2.5.1 history庫的運行流程
- 2.5 history庫原理
- 2.4.3 history監聽
- 2.4.2 history導航
- 2.4.1 創建memoryHistory
- 2.4 memoryHistory
- 2.3.4 history.createHref
- 2.3.3 history監聽
- 2.3.2 history導航
- 2.3.1 創建hashHisotry
- 2.3 hashHisotry
- 2.2.3 history監聽
- 2.2.2 history導航
- 2.2.1 創建browserHistory
- 2.2 browserHistory
- 2.1 history庫概述
- 第2章 history庫詳解
- 參考文獻
- 1.5 小結
- 1.4.3 手動觸發事件
- 1.4.2 hashchange事件
- 1.4.1 popstate事件
- 1.4 瀏覽器相關事件介紹
- 1.3.6 window.location.replace
- 1.3.5 window.location.hash
- 1.3.4 window.location.href
- 1.3.3 window.history.back
- 1.3.2 window.history.forward
- 1.3.1 window.history.go
- 1.3 在瀏覽器中跳轉
- 1.2.4 在base元素存在的情況下添加和修改瀏覽器記錄
- 1.2.3 通過相對路徑添加和修改瀏覽器記錄
- 1.2.2 history.replaceState
- 1.2.1 history.pushState
- 1.2 瀏覽器記錄
- 1.1.2 瀏覽器URI編碼
- 1.1.1 URI和URL簡介
- 1.1 URI和URL
- 第1章 導航相關JavaScript前驅知識
- 前言 Preface
- 序 Foreword
- 內容簡介
- 作者簡介
- 版權信息
- 封面
- 封面
- 版權信息
- 作者簡介
- 內容簡介
- 序 Foreword
- 前言 Preface
- 第1章 導航相關JavaScript前驅知識
- 1.1 URI和URL
- 1.1.1 URI和URL簡介
- 1.1.2 瀏覽器URI編碼
- 1.2 瀏覽器記錄
- 1.2.1 history.pushState
- 1.2.2 history.replaceState
- 1.2.3 通過相對路徑添加和修改瀏覽器記錄
- 1.2.4 在base元素存在的情況下添加和修改瀏覽器記錄
- 1.3 在瀏覽器中跳轉
- 1.3.1 window.history.go
- 1.3.2 window.history.forward
- 1.3.3 window.history.back
- 1.3.4 window.location.href
- 1.3.5 window.location.hash
- 1.3.6 window.location.replace
- 1.4 瀏覽器相關事件介紹
- 1.4.1 popstate事件
- 1.4.2 hashchange事件
- 1.4.3 手動觸發事件
- 1.5 小結
- 參考文獻
- 第2章 history庫詳解
- 2.1 history庫概述
- 2.2 browserHistory
- 2.2.1 創建browserHistory
- 2.2.2 history導航
- 2.2.3 history監聽
- 2.3 hashHisotry
- 2.3.1 創建hashHisotry
- 2.3.2 history導航
- 2.3.3 history監聽
- 2.3.4 history.createHref
- 2.4 memoryHistory
- 2.4.1 創建memoryHistory
- 2.4.2 history導航
- 2.4.3 history監聽
- 2.5 history庫原理
- 2.5.1 history庫的運行流程
- 2.5.2 history模擬歷史棧
- 2.5.3 browserHistory事件處理
- 2.5.4 hashHistory事件處理
- 2.5.5 history.block原理解析
- 2.6 history庫限制
- 2.6.1 history.block的使用限制
- 2.6.2 decodeURI解碼問題
- 2.7 使用history替換頁面search和hash示例
- 2.8 小結
- 參考文獻
- 第3章 React相關知識
- 3.1 Context
- 3.2 Hooks
- 3.2.1 useState
- 3.2.2 useEffect
- 3.2.3 useLayoutEffect
- 3.2.4 useRef
- 3.2.5 useMemo
- 3.2.6 useContext
- 3.2.7 自定義Hook
- 3.3 Refs
- 3.3.1 createRef
- 3.3.2 forwardRef
- 3.4 Memo
- 3.5 小結
- 參考文獻
- 第4章 認識React Router
- 4.1 ReactRouter是什么
- 4.2 React Router版本的演進
- 4.3 靜態路由與動態路由
- 4.4 使用React Router實現一個工程應用
- 4.5 小結
- 第5章 Router
- 5.1 Router是什么
- 5.2 Router源碼解析
- 5.2.1 history監聽
- 5.2.2 提供初始Context
- 5.2.3 提前監聽
- 5.3 BrowserRouter
- 5.4 HashRouter
- 5.5 NativeRouter
- 5.6 StaticRouter
- 5.7 相關Hooks
- 5.7.1 useRouterContext
- 5.7.2 useHistory
- 5.7.3 useLocation
- 5.8 小結
- 參考文獻
- 第6章 Route
- 6.1 Route是什么
- 6.2 Route的兩個基本要素
- 6.2.1 Route的第一個要素：path
- 6.2.2 Route的第二個要素：組件渲染方式
- 6.3 Route傳入組件的3個參數
- 6.3.1 match
- 6.3.2 location
- 6.3.3 history
- 6.4 Route的其他配置
- 6.4.1 location
- 6.4.2 exact
- 6.4.3 strict
- 6.4.4 sensitive
- 6.5 Route 源碼解析
- 6.5.1 上下文的更新
- 6.5.2 運行流程
- 6.6 相關Hooks
- 6.6.1 useRouteMatch
- 6.6.2 useParams
- 6.7 Route實戰案例
- 6.7.1 嵌套Route
- 6.7.2 相對路徑Route
- 6.7.3 重定向Route
- 6.7.4 默認子組件Route
- 6.7.5 緩存Route
- 6.7.6 Route渲染組件的可訪問性支持
- 6.7.7 query及命名參數
- 6.7.8 Route中的代碼拆分
- 6.8 小結
- 參考文獻
- 第7章 Link
- 7.1 Link介紹
- 7.1.1 Link的定義及屬性
- 7.1.2 Link源碼解析
- 7.2 NavLink
- 7.2.1 帶激活態的Link
- 7.2.2 轉義特殊字符
- 7.2.3 NavLink源碼解析
- 7.3 DeepLinking
- 7.4 BackButton
- 7.5 導航實戰案例
- 7.5.1 為導航組件擴展路由匹配
- 7.5.2 相對上下文路徑導航組件
- 7.5.3 相對上下文路徑的導航方法
- 7.5.4 為導航組件擴展search和hash支持
- 7.6 小結
- 參考文獻
- 第8章 其他路由組件及方法
- 8.1 Switch
- 8.1.1 Switch簡介
- 8.1.2 Switch源碼解析
- 8.2 Redirect
- 8.2.1 基本跳轉
- 8.2.2 條件跳轉
- 8.2.3 源碼解析
- 8.3 Prompt
- 8.4 withRouter
- 8.5 matchPath
- 8.6 實戰案例
- 8.6.1 路由動畫
- 8.6.2 Prompt組件
- 8.6.3 404頁面
- 8.6.4 不銷毀未命中路徑組件的擴展Switch
- 8.7 小結
- 參考文獻
- 第9章 進階實戰案例
- 9.1 路由組件的滾動恢復
- 9.1.1 scrollRestoration
- 9.1.2 容器元素滾動恢復
- 9.1.3 滾動管理者ScrollManager
- 9.1.4 滾動恢復執行者ScrollElement
- 9.1.5 多次嘗試機制
- 9.2 異步history方法
- 9.2.1 提升history方法
- 9.2.2 導航感知
- 9.3 為路由引入hash定位
- 9.3.1 頁面加載
- 9.3.2 異步數據加載
- 9.4 為組件引入路由生命周期
- 9.4.1 路由生命周期
- 9.4.2 實現路由生命周期高階組件
- 9.5 React Router狀態同步Redux
- 9.5.1 接入connected-react-router
- 9.5.2 connected-react-router原理分析
- 9.6 React Router狀態同步Mobx
- 9.7 路由與組件的結合實戰
- 9.7.1 路由結合Tabs組件
- 9.7.2 路由結合Modal組件
- 9.7.3 路由結合BreadCrumb組件
- 9.8 為history方法引入前置中間件
- 9.8.1 Redux中間件
- 9.8.2 中間件定義
- 9.8.3 實現history中間件
- 9.9 組件路由化
- 9.9.1 為組件加入path屬性
- 9.9.2 為組件賦予路由
- 9.10 路由與頁簽機制
- 9.10.1 頁簽介紹
- 9.10.2 頁簽配置
- 9.10.3 頁簽實現
- 9.11 在React Hooks中使用路由
- 9.11.1 通過React Hooks獲得路由組件
- 9.11.2 實現useHookRoutes
- 9.12 微服務路由
- 9.12.1 微服務介紹
- 9.12.2 實現示例
- 9.13 配置化路由擴展
- 9.13.1 配置化路由與react-router-config
- 9.13.2 重新實現配置化路由
- 9.14 配置化路由綜合示例
- 9.14.1 路由配置
- 9.14.2 導航
- 9.14.3 使用頁簽組件
- 9.14.4 頁簽棧維護
- 9.15 小結
- 參考文獻
- 附錄A 從React Router v3.x遷移到React Router v4.x及以上版本 更新時間：2021-04-16 16:11:39
