ÉîÈëÀí½âReact Router:´ÓÔ­Àíµ½Êµ¼ù

µÚ1Õ µ¼º½Ïà¹ØJavaScriptÇ°Çý֪ʶ 1
1£®1 URIºÍURL 1
1£®1£®1 URIºÍURL¼ò½é 1
1£®1£®2 ä¯ÀÀÆ÷URI±àÂë 3
1£®2 ä¯ÀÀÆ÷¼Ç¼ 4
1£®2£®1 history£®pushState 5
1£®2£®2 history£®replaceState 9
1£®2£®3 ͨ¹ýÏà¶Ô·¾¶Ìí¼ÓºÍÐÞ¸Ää¯ÀÀÆ÷¼Ç¼ 11
1£®2£®4 ÔÚbaseÔªËØ´æÔÚµÄÇé¿öÏÂÌí¼ÓºÍÐÞ¸Ää¯ÀÀÆ÷¼Ç¼ 14
1£®3 ÔÚä¯ÀÀÆ÷ÖÐÌøת 15
1£®3£®1 window£®history£®go 15
1£®3£®2 window£®history£®forward 16
1£®3£®3 window£®history£®back 16
1£®3£®4 window£®location£®href 17
1£®3£®5 window£®location£®hash 17
1£®3£®6 window£®location£®replace 18
1£®4 ä¯ÀÀÆ÷Ïà¹Øʼþ½éÉÜ 19
1£®4£®1 popstateʼþ 19
1£®4£®2 hashchangeʼþ 21
1£®4£®3 ÊÖ¶¯´¥·¢Ê¼þ 22
1£®5 С½á 24
²Î¿¼ÎÄÏ× 24
µÚ2Õ history¿âÏê½â 26
2£®1 history¿â¸ÅÊö 26
2£®2 browserHistory 32
2£®2£®1 ´´½¨browserHistory 32
2£®2£®2 historyµ¼º½ 33
2£®2£®3 history¼àÌý 37
2£®3 hashHisotry 38
2£®3£®1 ´´½¨hashHisotry 38
2£®3£®2 historyµ¼º½ 40
2£®3£®3 history¼àÌý 45
2£®3£®4 history£®createHref 47
2£®4 memoryHistory 49
2£®4£®1 ´´½¨memoryHistory 49
2£®4£®2 historyµ¼º½ 50
2£®4£®3 history¼àÌý 53
2£®5 history¿âÔ­Àí 54
2£®5£®1 history¿âµÄÔËÐÐÁ÷³Ì 54
2£®5£®2 historyÄ£ÄâÀúÊ·Õ» 55
2£®5£®3 browserHistoryʼþ´¦Àí 57
2£®5£®4 hashHistoryʼþ´¦Àí 58
2£®5£®5 history£®blockÔ­Àí½âÎö 60
2£®6 history¿âÏÞÖÆ 63
2£®6£®1 history£®blockµÄʹÓÃÏÞÖÆ 63
2£®6£®2 decodeURI½âÂëÎÊÌâ 64
2£®7 ʹÓÃhistoryÌæ»»Ò³ÃæsearchºÍhashʾÀý 70
2£®8 С½á 71
²Î¿¼ÎÄÏ× 71
µÚ3Õ ReactÏà¹Ø֪ʶ 72
3£®1 Context 72
3£®2 Hooks 76
3£®2£®1 useState 76
3£®2£®2 useEffect 78
3£®2£®3 useLayoutEffect 84
3£®2£®4 useRef 86
3£®2£®5 useMemo 87
3£®2£®6 useContext 89
3£®2£®7 ×Ô¶¨ÒåHook 89
3£®3 Refs 90
3£®3£®1 createRef 90
3£®3£®2 forwardRef 91
3£®4 Memo 91
3£®5 С½á 94
²Î¿¼ÎÄÏ× 94
µÚ4Õ ÈÏʶReact Router 95
4£®1 React RouterÊÇʲô 95
4£®2 React Router°æ±¾µÄÑݽø 96
4£®3 ¾²Ì¬Â·ÓÉÓ붯̬·ÓÉ 97
4£®4 ʹÓÃReact RouterʵÏÖÒ»¸ö¹¤³ÌÓ¦Óà 98
4£®5 С½á 107
µÚ5ÕÂ Router 109
5£®1 RouterÊÇʲô 109
5£®2 RouterÔ´Âë½âÎö 110
5£®2£®1 history¼àÌý 110
5£®2£®2 Ìṩ³õʼContext 110
5£®2£®3 ÌáÇ°¼àÌý 113
5£®3 BrowserRouter 113
5£®4 HashRouter 114
5£®5 NativeRouter 115
5£®6 StaticRouter 116
5£®7 Ïà¹ØHooks 121
5£®7£®1 useRouterContext 122
5£®7£®2 useHistory 122
5£®7£®3 useLocation 123
5£®8 С½á 124
²Î¿¼ÎÄÏ× 124
µÚ6ÕÂ Route 125
6£®1 RouteÊÇʲô 125
6£®2 RouteµÄÁ½¸ö»ù±¾ÒªËØ 125
6£®2£®1 RouteµÄ**¸öÒªËØ£ºpath 126
6£®2£®2 RouteµÄµÚ¶þ¸öÒªËØ£º×é¼þäÖȾ·½Ê½ 134
6£®3 Route´«Èë×é¼þµÄ3¸ö²ÎÊý 138
6£®3£®1 match 138
6£®3£®2 location 140
6£®3£®3 history 141
6£®4 RouteµÄÆäËûÅäÖà 142
6£®4£®1 location 142
6£®4£®2 exact 142
6£®4£®3 strict 143
6£®4£®4 sensitive 144
6£®5 Route Ô´Âë½âÎö 144
6£®5£®1 ÉÏÏÂÎĵĸüР144
6£®5£®2 ÔËÐÐÁ÷³Ì 147
6£®6 Ïà¹ØHooks 149
6£®6£®1 useRouteMatch 149
6£®6£®2 useParams 149
6£®7 Routeʵս°¸Àý 150
6£®7£®1 ǶÌ×Route 150
6£®7£®2 Ïà¶Ô·¾¶Route 152
6£®7£®3 Öض¨ÏòRoute 153
6£®7£®4 ĬÈÏ×Ó×é¼þRoute 156
6£®7£®5 »º´æRoute 158
6£®7£®6 RouteäÖȾ×é¼þµÄ¿É·ÃÎÊÐÔÖ§³Ö 165
6£®7£®7 query¼°ÃüÃû²ÎÊý 166
6£®7£®8 RouteÖеĴúÂë²ð·Ö 168
6£®8 С½á 169
²Î¿¼ÎÄÏ× 170
µÚ7ÕÂ Link 171
7£®1 Link½éÉÜ 171
7£®1£®1 LinkµÄ¶¨Òå¼°ÊôÐÔ 171
7£®1£®2 LinkÔ´Âë½âÎö 174
7£®2 NavLink 176
7£®2£®1 ´ø¼¤»î̬µÄLink 176
7£®2£®2 תÒåÌØÊâ×Ö·û 178
7£®2£®3 NavLinkÔ´Âë½âÎö 178
7£®3 DeepLinking 181
7£®4 BackButton 182
7£®5 µ¼º½ÊµÕ½°¸Àý 183
7£®5£®1 Ϊµ¼º½×é¼þÀ©Õ¹Â·ÓÉÆ¥Åä 183
7£®5£®2 Ïà¶ÔÉÏÏÂÎÄ·¾¶µ¼º½×é¼þ 184
7£®5£®3 Ïà¶ÔÉÏÏÂÎÄ·¾¶µÄµ¼º½·½·¨ 185
7£®5£®4 Ϊµ¼º½×é¼þÀ©Õ¹searchºÍhashÖ§³Ö 188
7£®6 С½á 191
²Î¿¼ÎÄÏ× 191
µÚ8Õ ÆäËû·ÓÉ×é¼þ¼°·½·¨ 192
8£®1 Switch 192
8£®1£®1 Switch¼ò½é 192
8£®1£®2 SwitchÔ´Âë½âÎö 194
8£®2 Redirect 196
8£®2£®1 »ù±¾Ìøת 196
8£®2£®2 Ìõ¼þÌøת 197
8£®2£®3 Ô´Âë½âÎö 198
8£®3 Prompt 201
8£®4 withRouter 203
8£®5 matchPath 205
8£®6 ʵս°¸Àý 206
8£®6£®1 ·Óɶ¯»­ 206
8£®6£®2 Prompt×é¼þ 210
8£®6£®3 404Ò³Ãæ 212
8£®6£®4 ²»Ïú»ÙδÃüÖз¾¶×é¼þµÄÀ©Õ¹Switch 215
8£®7 С½á 218
²Î¿¼ÎÄÏ× 219
µÚ9Õ ½ø½×ʵս°¸Àý 220
9£®1 ·ÓÉ×é¼þµÄ¹ö¶¯»Ö¸´ 220
9£®1£®1 scrollRestoration 220
9£®1£®2 ÈÝÆ÷ÔªËعö¶¯»Ö¸´ 221
9£®1£®3 ¹ö¶¯¹ÜÀíÕßScrollManager 221
9£®1£®4 ¹ö¶¯»Ö¸´Ö´ÐÐÕßScrollElement 224
9£®1£®5 ¶à´Î³¢ÊÔ»úÖÆ 227
9£®2 Òì²½history·½·¨ 229
9£®2£®1 ÌáÉýhistory·½·¨ 229
9£®2£®2 µ¼º½¸ÐÖª 231
9£®3 Ϊ·ÓÉÒýÈëhash¶¨Î» 233
9£®3£®1 Ò³Ãæ¼ÓÔØ 233
9£®3£®2 Òì²½Êý¾Ý¼ÓÔØ 235
9£®4 Ϊ×é¼þÒýÈë·ÓÉÉúÃüÖÜÆÚ 237
9£®4£®1 ·ÓÉÉúÃüÖÜÆÚ 237
9£®4£®2 ʵÏÖ·ÓÉÉúÃüÖÜÆڸ߽××é¼þ 241
9£®5 React Router״̬ͬ²½Redux 246
9£®5£®1 ½ÓÈëconnected-react-router 246
9£®5£®2 connected-react-routerÔ­Àí·ÖÎö 249
9£®6 React Router״̬ͬ²½Mobx 251
9£®7 ·ÓÉÓë×é¼þµÄ½áºÏʵս 252
9£®7£®1 ·ÓɽáºÏTabs×é¼þ 252
9£®7£®2 ·ÓɽáºÏModal×é¼þ 256
9£®7£®3 ·ÓɽáºÏBreadCrumb×é¼þ 257
9£®8 Ϊhistory·½·¨ÒýÈëÇ°ÖÃÖмä¼þ 260
9£®8£®1 ReduxÖмä¼þ 260
9£®8£®2 Öмä¼þ¶¨Òå 261
9£®8£®3 ʵÏÖhistoryÖмä¼þ 263
9£®9 ×é¼þ·ÓÉ»¯ 268
9£®9£®1 Ϊ×é¼þ¼ÓÈëpathÊôÐÔ 268
9£®9£®2 Ϊ×é¼þ¸³Óè·ÓÉ 269
9£®10 ·ÓÉÓëҳǩ»úÖÆ 274
9£®10£®1 ҳǩ½éÉÜ 274
9£®10£®2 ҳǩÅäÖà 276
9£®10£®3 ҳǩʵÏÖ 277
9£®11 ÔÚReact HooksÖÐʹÓ÷ÓÉ 282
9£®11£®1 ͨ¹ýReact Hooks»ñµÃ·ÓÉ×é¼þ 282
9£®11£®2 ʵÏÖuseHookRoutes 284
9£®12 ΢·þÎñ·ÓÉ 286
9£®12£®1 ΢·þÎñ½éÉÜ 286
9£®12£®2 ʵÏÖʾÀý 287
9£®13 ÅäÖû¯Â·ÓÉÀ©Õ¹ 294
9£®13£®1 ÅäÖû¯Â·ÓÉÓëreact-router-config 294
9£®13£®2 ÖØÐÂʵÏÖÅäÖû¯Â·ÓÉ 298
9£®14 ÅäÖû¯Â·ÓÉ×ÛºÏʾÀý 303
9£®14£®1 ·ÓÉÅäÖà 304
9£®14£®2 µ¼º½ 310
9£®14£®3 ʹÓÃҳǩ×é¼þ 318
9£®14£®4 ҳǩջά»¤ 325
9£®15 С½á 335
²Î¿¼ÎÄÏ× 336
¸½Â¼A ´ÓReact Router v3£®xǨÒƵ½React Router v4£®x¼°ÒÔÉÏ°æ±¾ 337