React路由传参

44 阅读1分钟
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1"
"react": "16.8.0"
"react-dom": "^16.6.0"

16版本和4版本的路由 传参 方式。

  <NavLink to={{ pathname: "/siderPage/eventRegistration/record/index", search: '?igcid=' + record.igcid }}>
       <Button
         size="small"
         type="primary"
       >
        报名记录
     </Button>
  </NavLink>

获取参数

  //此处使用useRef储存igcid,为达到只有第一次渲染页面和人为操作时才对igcid进行更改的目的!!
  const igcidParams = useRef(utils.getQueryString(props.location.search, "igcid"))

useRef可忽略

    // 获取url?id参数 
    getQueryString(str, name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        let r = str.substr(1).match(reg);
        if (r != null) return decodeURI(r[2]);
        return null;
    },