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”