如何解决从网址查询中获取网址参数
目标:从URL检索ID
function findByKey(obj,key) {
if(obj==null || obj==undefined ){
return;
}
if(obj.constructor === Object || obj.constructor === Array){
var keys = Object.keys(obj);
for(i in keys){
var i = keys[i];
if(key == i){
return obj;
}else{
var test = findByKey(obj[i],key);
if(test != undefined){
return test;
}
}
}
}else if(obj == key){
return key;
}
return;
}
这是我的供稿代码:
<Router>
<Header />
<Switch>
<Route exact path="/" component={Feed} />
<Route exact path="/" />
<Route
exact
path="/product/:productId"
component={DetailProductPage}
/>
</Switch>
</Router>
还有创建URL的 <div className="Feed">
<div className="Feed__cards">
{products.map((product) => (
<ProductCard
image={product.image}
brand={product.brand}
name={product.name}
id={product.id}
/>
))}
</div>
</div>
组件:
ProductCard
<div className="productCard__container">
<img src={image} />
<h1>{brand}</h1>
<h2>{name}</h2>
<p>{id}</p>
<p>{<a href={`/product/${id}`}>View</a>}</p>
</div>
沿着这条路线,我会得到一个带有产品参数的网址:(例如function DetailProductPage({ id }) {
const productId = { id };
return (
<div>
<h1>Product page</h1>
<p>{id}</p>
</div>
);
}
)
如何查询网址的http://localhost:3000/product/6CeJGSm7dBTABs8rRBJh
部分并将其放入变量中?
解决方法
我假设您为此使用了react-router-dom。您可以通过几种方法从URL检索此值,但是提供的代码最简单的方法是使用useParams
钩子,如下所示:
import { useParams } from 'react-router-dom';
function DetailProductPage({ id }) {
const { productId } = useParams();
return (
<div>
<h1>Product page</h1>
<p>{productId}</p>
</div>
);
}
此处有更多信息:https://reactrouter.com/web/api/Hooks/useparams
,好像下面的代码从URL中获取了产品ID:
const params = useParams();
,
在导出组件时,您需要使用{
"summary": "some summary","description": "some description","location": "some location","end": {"dateTime" : "2020-10-10T13:30:00+5:30"},"start" : { "dateTime" : "2020-10-10T13:00:00+5:30"},}
来访问此参数:
withRouter
您的参数现在位于import { withRouter } from 'react-router-dom';
export default withRouter(ComponentName);
中。在您的情况下:
props
或(使用解构):
const productId = props.match.params.productId;
,
您可以使用javascript提供的Url对象来解析网址。
要获取您的当前位置,您可以使用
window.location
因此,通过组合网址和位置
let urlArr = new URL(window.location).href.split('/');
console.log(urlArr[urlArr.length - 1]);
这将记录 6CeJGSm7dBTABs8rRBJh
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。