方法一:直接用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”