react路由使用以及封裝

2021-10-06 23:22:09 字數 3125 閱讀 6859

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屬性中多了這...