react在router中傳遞數據的2種方法

概述

不傳遞數據叫什麼單頁面應用，渲染模塊還須要http請求算什麼單頁面應用。

本文總結了react-router4中使用BrowserRouter時傳遞數據的兩種方法，供之後開發參考，相信對其餘人也有用。

使用Link

Link是react-router4中很常見的一個類，不少人在頁面跳轉的時候都會用到它。在用Link的時候傳遞數據的方法以下：

import { Link } from 'react-router-dom';

//不傳遞數據
<Link to={模塊路徑}>{內容}</Link>

//傳遞數據,在目標模塊用this.props.location.state調用數據。
    <Link to={{
        pathname: {模塊路徑},
        state: {數據}
    }}>{內容}</Link>

使用history.push

history是H5中引入的，之前人們都用hash。

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

import { withRouter } from 'react-router-dom';

//不傳遞數據
this.props.history.push({目標模塊路徑});

//傳遞數據,在目標模塊用this.props.location.state調用數據。
this.props.history.push({
    pathname:{目標模塊路徑},
    state:{數據}
    }）

export default withRouter(自身模塊名)

區別

在點擊的時候跳轉並傳遞數據：既可用Link方法，也能夠用history.push方法(須要結合Onclick方法，在點擊事件的回調函數裏面調用history.push)。

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

另外說下，在模塊中獲取路由的/:id中的id：在this.props.match.params.id中獲取。(其中id可換爲其它參數。)