React 動態路由匹配模式

2021-09-29 14:17:12 字數 340 閱讀 7361

在react開發中,有時候會碰到一種需求:某乙個頁面的內容,會根據呼叫的後台api版本的不同,顯示不同的內容。

如果需要顯示的內容,只是欄位的多少差別,可以在路由中通過傳參的方式進行區分。而如果需要顯示的內容,差別較大,甚至出現結構差別,就需要通過編寫不同元件的方式進行顯示。

不同的元件,在動態路由中,需要用到匹配模式,類似於正則的方式對路由進行過濾。

,

,,

上面例子中,如果匹配到key是12、23、11會載入demo1元件,匹配到key是4、5或6,會載入demo2元件,其他key值則載入demo3元件,這樣就起到了根據不同key值進行動態路由的效果。

react 動態修改路由 React 動態路由

封裝乙個高階元件,用來實現將普通的元件轉換成動態元件import react from react const asynccomponent loadcomponent class asynccomponent extends react.component catch err this.state...

react 動態修改路由 react 動態載入路由

前言react router4 不再推薦將所有路由規則放在同乙個地方集中式路由,子路由應該由父元件動態配置,元件在 匹配就在 渲染,更加靈活 引入必要的依賴import react from react import from react router 接下來建立乙個component函式 目的就是...

動態路由匹配

我們經常需要把某種模式匹配到的所有路由,全部對映到同個元件,那麼我們可以在vue router的路由路徑中使用 動態路徑引數 來達到這個效果 動態路徑引數,以冒號開頭 看個小示例 const router new router 在user元件中 所以此時,user vip 1 和 user comm...