react-router-dom

路由跳轉及傳參

方式1：經過params

• 方法一（在刷新頁面的時候，參數不會丟失。）

(1)路由文件

<Route path='./home/:id' component={home}></Route>
複製代碼

(2)跳轉傳參

HTML方式:  <NavLink to={'./home/' +'2'}>用戶中心</NavLink>
JS方式:    this.props.history.push('/user/' + '2')
複製代碼

(3)接收參數

this.props.match.params.id
複製代碼

• 方法二（在刷新頁面的時候，參數丟失）

(1)跳轉傳參

this.props.history.push({ pathname: '/home' , params : { id: '2' }})
複製代碼

(2)接收參數

this.props.location.params.id
複製代碼

方式2：經過query

（在刷新頁面的時候，參數丟失）

(1)路由文件

<Route path="/home" component={home}/>
複製代碼

(2)跳轉傳參

HTML方式：<NavLink to={ pathname:'/home', query:{id:3} }>跳轉按鈕</NavLink>
js方式： this.props.history.push({ pathname: '/three' , query : { id: '6666' }})
複製代碼

(3)接收參數

this.props.location.query.id
複製代碼

方式3：經過state

（在刷新頁面的時候，參數不會丟失）

(1)路由文件

<Route path="/home" component={home}/>
複製代碼

(2)跳轉傳參

HTML方式:  <NavLink to={ pathname: "/home", state: {id: 3} }>日誌</NavLink>
JS方式:    this.props.history.push({ pathname: "/home" , state: { id: 3 }})
複製代碼

(3)接收參數

this.props.location.state.id
複製代碼