react中路由相關跳轉
阿新 • • 發佈:2019-01-06
1)this.props.history.goBack()
返回到上一頁面,就是你跳轉到這個頁面的前一個頁面,為什麼使用這種方式呢,因為在今天寫的過程中發現使用
this.props.dispatch(routerRedux.push({
pathname: `/person/policyForm/-1/${releasePersonId}`,
}))
這樣的方法,必須得你知道他的路由,但當你不知道他的路由的時候,怎麼跳轉回去呢,就是用這裡講的this.props.history.goBack(),直接調回你的上一個頁面,可是我好想傳個引數怎麼辦呢?,這個函式能傳參嗎?答案是當然不能,但是我得需要一個引數來返回給上一頁面,來控制他的tabs的defaultActiveKey的值,這個值決定我得tabs應該目前選中,高亮哪個TabPane,因為我從其中一個TabPane跳轉了頁面,我希望返回的時候,能夠停留在之前那個TabPane,而不是預設第一個,這裡我就使用了一個方法叫做本地儲存,就是localStorage,我將每次點選的key的值,存入localStorage裡面,然後在componentWillMount這個生命週期去取出值.
程式碼如下
callback=(key)=>{
localStorage.setItem('flag',key);
}
componentWillMount(){
const loca=localStorage.getItem('flag')||'1';
this.props.dispatch({
type:'personrelease/updateState',
payload:{flag:loca},
})
}
有人或許會問為什麼要使用dispatch來改變modals裡面的值,就是為什麼在modals裡面重新定一個flag,不能在render裡面直接寫上
const loca=localStorage.getItem('flag');
return (
<div >
<Row>
<Col span={24}>
<Tabs defaultActiveKey={loca||'1'} onChange={this.callback}>
答案是不能,為什麼呢,因為我親身試驗過了,我去查了相關資料,結果發現問題就出在了,localStorage的設定和獲取原來也是非同步的,所以每次當我執行的時候,他打印出來第一次都是undefined,然後就不接著渲染頁面了,所以我試了很久也算試出來,但是還是不怎麼明白原理,我將程式碼改成了這個樣子的
const {flag}= this.props.personrelease;
const loca=localStorage.getItem('flag');
return (
<div >
<Row>
<Col span={24}>
<Tabs defaultActiveKey={loca||flag} onChange={this.callback}>
兩個都是通過非同步請求獲取到了值,然後這個必定會取到其中一個值.這樣就解決了重新整理不會更改當前tabs的選中和跳轉頁面返回還能在之前TabPane頁面.