React Router页面传递参数-1

方法一:直接用URL传递

<Link to ={`/products/info?orderID=${orderID}`}>{orderID}</Link>

目标页面获取

console.log("id:",this.props.location.search);

打印出的值为:”id:?orderID=12345”

目标页面获取参数-JS

• 设置或获取对象指定的文件名或路径

window.location.pathname

• 设置或获取整个 URL 为字符串

window.location.href

• 设置或获取与 URL 关联的端口号码

window.location.port

• 设置或获取 URL 的协议部分

window.location.protocol

• 设置或获取 href 属性中在井号“#”后面的分段

window.location.hash

• 设置或获取 location 或 URL 的 hostname 和 port 号码

window.location.host

• 设置或获取 href 属性中跟在问号后面的部分

window.location.search

获取参数的方法

• 正则表达式

function getQueryString(name) {          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");          var r = window.location.search.substr(1).match(reg);          if (r != null) return unescape(r[2]);          return null;      }  

• 获取参数值集合

function GetRequest() {      var url = location.search; //获取url中"?"符后的字串      var theRequest = new Object();      if (url.indexOf("?") != -1) {         var str = url.substr(1);         strs = str.split("&");         for(var i = 0; i < strs.length; i ++) {            theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);         }      }      return theRequest;   }   

使用方法:
var Request = new Object();
Request = GetRequest();
var 参数1,参数2,参数3,参数N;
参数1 = Request[”参数1”];
参数2 = Request[”参数2”];
参数3 = Request[”参数3”];

• 方法三

/**   * 获取指定的URL参数值   * URL:http://www.quwan.com/index?name=tyler   * 参数：paramName URL参数   * 调用方法:getParam("name")   * 返回值:tyler   */  function getParam(paramName) {      paramValue = "", isFound = !1;      if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {          arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0;          while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++      }      return paramValue == "" && (paramValue = null), paramValue  }  

注意事项

当url中包含#的时候window.location.search获取的值为空

• 什么是window.location?
  URL：http://b.a.com:88/index.php?name=kang&when=2011#first

属性 含义 值 protocol 协议 “http:” hostname: 服务器的名字 “b.a.com” port: 端口 “88” pathname: URL中主机名后的部分 “/index.php” search: 返回URL中第一个”?”后的部分,又称查询字符串 “?name=kang&when=2011” hash: 返回URL中第一个”#”之后的内容 “#first” host: 等于hostname + port “b.a.com:88” href: 当前页面的完整URL “http://www.a.com:88/index.php?name=kang&when=2011#first”

window.location和document.location互相等价的，可以交换使用

location的8个属性都是可读写的，但是只有href与hash的写才有意义。例如改变location.href会重新定位到一个URL，而修改location.hash会跳到当前页面中的anchor(或者

等)名字的标记(如果有)，而且页面不会被重新加载

• 为什么 window.location.search 为空?

  注意上面的search和hash的区别,如果URL中”?”之前有一个”#”比如：”http://localhost:63342/index.html#/version？type=35&id=5”那么使用window.location.search得到的就是空（“”）。因为“？type=35&id=5”串字符是属于“#/version？type=35&id=5”这个串字符的，也就是说查询字符串search只能在取到“？”后面和“#”之前的内容，如果“#”之前没有“？”search取值为空。

• 应该使用的方法获取?后面的参数值

   //获取url参数function GetQueryString (name){    var after = window.location.hash.split("?")[1];    if(after)    {        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");        var r = after.match(reg);        if(r != null)        {            return  decodeURIComponent(r[2]);        }        else        {            return null;        }    }}

方法二

react-router 4.0 对于接受参数采用 { this.props.match.params.id }

定义Route

<Route path="list/:id"></Router> 

导航设置

<Link to="list/123456"></Link>

目标页面获取

console.log("id:",this.props.match.params.id);

打印出的值为:”id:123456”