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
'react'
;export
default
class
home
extends
react.component
}
import react from
'react'
;export
default
class
home
extends
react.component
}
我們可以在src中新建目錄router,然後建router.js檔案
新建store目錄,router.js
import react from
'react'
import reactdom from
"react-dom"
;import
from
"react-router-dom"
;import home from
'../containers/home.js'
import detail from
'../containers/detail.js'
import
afrom
'../containers/a.js'
import index from
'../containers/index.js'
import advantage from
'../containers/advantage.js'
;import store from
'../components/teststore'
const routes =[,
]},,
,]export
;index.js中新增
(
<
/browserrouter>
),
// index.js
import react from
'react'
;import reactdom from
'react-dom'
;import
from
'./router/router.js'
;import
from
'react-router-dom'
;import
from
'react-router-config'
;import index from
'./containers/index.js'
reactdom.
render((
<
/browserrouter>),
document.
getelementbyid
('root'))
;
import react from
'react'
;import
from
'react-router-dom'
;import
from
'react-router-config'
export
default
class
fyadvantage
extends
react.component
}render()
"/advantage/advantage1"
>advantage1<
/link>
<
/li>
"/advantage/advantage2"
>advantage2<
/link>
<
/li>
"/advantage/advantage3"
>advantage3<
/link>
<
/li>
<
/ul>
<
/div>
<
/div>)}
}這樣就達到了路由巢狀,而且新增路由也相對簡單了
jsonp的使用以及封裝
跨域不受同源策略影響的資源的引入,如script img iframe jsonp解決跨域問題 可以讓網頁從別的網域名稱 那獲取資料,即跨域讀取資料。通過script來實現跨域 router.get getajax ctx,next ctx.body function ajax options js...
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 sea...
vue路由使用以及元件擴充套件
元件ref的使用 獲取dom節點 給dom節點記上ref屬性,可以理解為給dom節點起了個名字。加上ref之後,在 refs屬性中多了這個元素的引用。通過vue例項的 refs屬性拿到這個dom元素。獲取元件 給元件記上ref屬性,可以理解為給元件起了個名字。加上ref之後,在 refs屬性中多了這...