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

react中路由相关跳转

猜你喜欢