React 封裝路由

封裝路由

import movie from

"../views/movie"
;import cinema from
"../views/cinema"
;import mine from
"../views/mine"
;import city from
"../views/city"
;import search from
"../views/search"
;import hot from
"../views/hot"
;import news from
"../views/news"
;import login from
"../views/login"
;import detail from
"../views/detail"
import react,
from
'react'
;import loadable from
"react-loadable"
//按需載入
//按需載入
const
loading=(
)=>
const cinema =
loadable()
const routes =[,
,,]}
,,,,
,,,]
export
default routes;

import react from

"react"
;import
from
"react-router-dom"
;function
routerview
(props)
= props;
//這裡就是傳參過來
let routerarr = routes.
filter
(item =>
!item.redirect)
;//非重定向的資料過濾出來
let redirectarr = router && routes.
filter
(item => item.redirect)
.map
((item, index)
=>
from
= to=
/>
)return
path=
render=
child=
/>}}
/>})
.concat
(redirectarr)
//將其合併
}<
/switch>
}export
default routerview;

import react,

from 'react'
import
from "react-router-dom"
import routerview from "./routerview"
import routes from "./routerconfig"
function rootrouter()
>
<
/routerview>
<
/browserrouter>
}export default rootrouter;

/>

剩下的是二級路由傳參 let
=this
.props; 然後在呼叫二級頁面的時候傳參過去
/>

import react,

from
'react'
import
from
'react-router-dom'
class
routerview
extends
component
//路由相關配置
} state =
getrenderroute()
=this
.props
const routes = router instanceof
array
? router : router.routes
const redirects = routes.
filter
(item => item.redirect)
return
["route"
>
key=
render=
children=
meta=
/>}}
/>)}
)}<
/switch>
,"redirect"
>
key=
from=/
>)}
)}<
/switch>]}
render()
=this
.props
if(router instanceof
array
)else
<
/browserrouter>)}
else
<
/hashrouter>)}
}}}export
default routerview

react路由使用以及封裝

yarn add react router dom or,if you re not using yarn npm install react router dom 路由對應官網 在目錄container下新建兩個檔案，home.js和detail.js import react from reac...

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...