React Router 動態路由的設計哲學

2022-08-09 09:33:09 字數 818 閱讀 5935

缺點:先宣告,後使用,而且必須在應用執行之前,無法在應用執行期間改變。

優點:路由可以在你的應用執行期間使用,作為元件的一部分,那這也就意味著路由可以在執行期間動態的自由組合

關於動態路由是如何工作的

響應式路由

考慮一種動態構建的介面需要在不同的螢幕尺寸下執行不同的互動,比如乙個列表項的元件,當它在較小的視口進行互動時,只能顯示一排豎排的按鈕,內部的細節需要點選按鈕後進行路由跳轉。

而當它在較大的視口進行互動時,除了這一排按鈕,還能多出乙份視窗用於展示點選按鈕後顯示的內容(這在安卓中可以通過fragment來處理),也就是說我們不需要再進行路由跳轉而導致整個頁面重新整理為新出現的內容。

當在大螢幕模式下,我們不需要路由功能,而在小螢幕下,我們需要路由功能,在不重新整理頁面或跳轉的情況下乙個使用者使用大屏**橫屏豎屏切換(類似安卓中的儲存 state)

結論:靜態路由無法乾淨的解決該問題

作為相對於靜態路由需要提前配置好才能發揮作用的條件下,動態路由能在執行時進行路由功能,當你開始考慮路由本身如果是動態的時候,你可能會想出如下**結構

也就是說,我們能根據執行時的環境來決定是否啟用路由功能。此時當使用者進行手機橫豎屏切換時,前端可以無縫響應使用者環境。

React Router概述(路由)

react路由 站點 1.可以根據不同的位址,展示不同的元件 2.可以無重新整理的跳轉頁面 具備上面兩個功能的可以稱之為路由 react router 2.react router dom 利用路由核心庫,結合實際頁面,實現跟頁面路由密切相關的功能 兩種模式 協議名 schema https 主機名...

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會變成類似...