react在router中傳遞資料的2種方法

2022-03-04 12:33:12 字數 887 閱讀 4542

不傳遞資料叫什麼單頁面應用,渲染模組還需要http請求算什麼單頁面應用。

link是react-router4中很常見的乙個類,很多人在頁面跳轉的時候都會用到它。在用link的時候傳遞資料的方法如下:

import  from 'react-router-dom';

//不傳遞資料

//傳遞資料,在目標模組用this.props.location.state呼叫資料。

history是h5中引入的,以前人們都用hash。

react-router4中有好幾種方法使用history.push。下面我介紹使用browserrouter時使用的方法。

import  from 'react-router-dom';

//不傳遞資料

this.props.history.push();

//傳遞資料,在目標模組用this.props.location.state呼叫資料。

this.props.history.push(,

state:

})export default withrouter(自身模組名)

點選的時候跳轉並傳遞資料:既可用link方法,也可以用history.push方法(需要結合onclick方法,在點選事件的**函式裡面呼叫history.push)。

js控制跳轉並傳遞資料:只能用history.push方法。(直接在js中使用history.push)

另外說下,在模組中獲取路由的/:id中的id:在this.props.match.params.id中獲取。(其中id可換為其它引數。)

react中router使用方式

react路由有兩種 browserrouter和hashrouter browserrouter原理是h5的historyapi 位址列沒有 號 通過高階元件的屬性 方式,將match,location,history以props的形式傳遞給route import from react rout...

在Vue cli中搭建router環境

router view div template export default script style 在src資料夾中新建目錄 views 用於存放路由元件 router.js的目的就是為了把new vuerouter作為模組,這樣main.js中就可以直接引入該模組使用 router.js 引...

react中context傳遞資料

在乙個典型的 react 應用中,資料是通過 props 屬性自上而下 由父及子 進行傳遞的,但這種做法對於某些型別的屬性而言是極其繁瑣的 例如 地區偏好,ui 主題 這些屬性是應用程式中許多元件都需要的。context 提供了一種在元件之間共享此類值的方式,而不必顯式地通過元件樹的逐層傳遞 pro...