1. 程式人生 > >react中路由相關跳轉

react中路由相關跳轉

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頁面.