从网址查询中获取网址参数

时间:2020-09-29 20:53:10

标签: reactjs

目标:从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部分并将其放入变量中?

4 个答案:

答案 0 :(得分:1)

我假设您为此使用了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

答案 1 :(得分:0)

好像下面的代码从URL中获取了产品ID:

const params = useParams();

答案 2 :(得分:0)

在导出组件时,您需要使用{ "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;

答案 3 :(得分:0)

您可以使用javascript提供的Url对象来解析网址。

要获取您的当前位置,您可以使用

window.location

因此,通过组合网址和位置

let urlArr = new URL(window.location).href.split('/');
console.log(urlArr[urlArr.length - 1]);

这将记录 6CeJGSm7dBTABs8rRBJh