react路由
##站點
1.可以根據不同的位址，展示不同的元件
2.可以無重新整理的跳轉頁面
具備上面兩個功能的可以稱之為路由
#react router
2.react-router-dom:利用路由核心庫，結合實際頁面，實現跟頁面路由密切相關的功能
兩種模式
協議名(schema)：https
主機名（host）：www.baidu.com
##hash router 雜湊路由
這種模式相容新最好
## broswer history router 瀏覽器歷史記錄路由
1.html5出現後，新增了history api 後，瀏覽器擁有了改變路徑二不重新整理頁面的方式
history表示瀏覽器的歷史紀錄，它使用棧的方式儲存
history.length：獲取棧中的資料量
history.pushstate()
引數1：附加的資料，自定義的資料，可以是任何型別
引數2：頁面標題，目前大部分瀏覽器不支援
history.replacestate()
引數1：附加的資料，自定義的資料，可以是任何型別
引數2：頁面標題，目前大部分瀏覽器不支援
根據頁面的路徑來決定渲染哪個元件
##路由元件
react-router 為我們提供了兩個重要的元件
##router元件
它本身不會做任何展示，僅提供路由模式配置，另外，該元件會產生乙個上下文，上下文中會提供一些使用的物件和方法，供其他相關元件使用
1.hashrouter ：該元件，使用hash模式匹配
2.browserrouter：該元件使用了browserhistory模式匹配
通常情況下，router元件只有乙個，該元件包裹整個頁面
##route元件
根據不同的位址，展示不同的元件
兩個重要屬性
1.path：匹配的路徑
預設情況下不區分大小寫， 可以新增boolean屬性sensitive來控制是否區分大小寫
預設情況下，只匹配根目錄，加上boolean屬性exact進行精確匹配
如果不寫path的話，會匹配所有路徑
2.component：匹配成功後顯示的元件（函式元件）
3.children：
1.傳遞react元素，無論是否匹配，一定會顯示children，並且會忽略component屬性
2.傳遞乙個函式，該函式有多個引數，這些引數來自於上下文，該函式返回react元素，則一定會顯示返回的元素，並且忽略component屬性
route元件可以卸寫在任何地方，只要保證他是router元件的後代元素
##switch元件
寫到switch元件中的route元件，只要匹配到了就不會繼續往下匹配了
由於switch元件會迴圈所有子元件，然後讓每乙個子元件去匹配，若匹配到，則渲染對應元件，然後停止迴圈，因此，不能在switch元件中的子元素使用除了router和redirect以外的元件
react router 巢狀路由
import react from react import from react router dom export default function function home console.log match return h2 function about function topics ...
react router打包後開啟路由頁面空白
react router打包後無法通過路由進入到頁面，是因為當我們使用react router dom裡的browserrouter as router時，是用瀏覽器history物件的方法去請求伺服器，如果伺服器沒有相對於的路由去指向對應的頁面路由會找不到資源。browserrouter會變成類似...
React Router 4 0 實現路由守衛
在使用 vue 或者 angular 的時候，框架提供了路由守衛功能，用來在進入某個路有前進行一些校驗工作，如果校驗失敗，就跳轉到 404 或者登陸頁面，比如 vue 中的beforeenter函式 router.beforeeach async to,from,next 在之前的版本中，react...