react的路由對比起vue來說,實用度確實8太行, 因為我之前對vue比較熟悉, 所以先入為主的覺得路由就應該按照vue那樣寫(本人自學的react,公司也沒有用到react,也沒有好大哥帶我,所以一切都是自己摸索的,不對之處請指出)
在我學習的過程中發現react-router並沒有像vue-router那樣的子路由層級巢狀關係, 這不利於導航欄的渲染, 所以我覺得應該是乙個類似vue-router那樣的巢狀關係
import react,
from
"react"
;import
from
"react-router-dom"
// 路由列表
export
const routerlist =[}
,,children:[,
]}]// 格式化列表
function
formatrouterlist
(arr))}
else
} console.
log(newlistarr)
return newlistarr;
}// 遞迴解析children
function
formatrouterchildren
(arr,list =
,fpath)
else)}
}return list
}// 利用高階元件進行 元件懶載入
function
asycom
(loadcomponent)
// 非同步載入
componentdidmount()
loadcomponent()
.then
(module => module.
default).
then
((component)
=>);
}).catch
((err)
=>);
}render()
=this
.state;
return
(component)
?/>
:null;}
}}// 注意這裡僅僅是渲染了switch元件, 外層需要套browserrouter或者hashrouter
export
default()
=>
key=
component=
/>)}
)}exact component=
/>)}
/>
<
/switch>
)}
react 動態修改路由 React 動態路由
封裝乙個高階元件，用來實現將普通的元件轉換成動態元件import react from react const asynccomponent loadcomponent class asynccomponent extends react.component catch err this.state...
react學習六 react路由
react router 安裝包yarn add react router dom匯入路由模組 import reactdom from react dom route 表示乙個路由規則，在 route 上，有兩個比較重要的屬性，path component link 表示乙個路由的鏈結 就好比 v...
react 動態修改路由 React中的路由設定
在本文中，我們來看看如何在react中設定路徑路由。我們期望在結尾時取得如下的成績 在本次演示中，我們建立了三個頁面 page 1，page 2，page 3。為了簡化處理，三個頁面的定義類似如下 import react from react function page1 from react r...