Question

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

Answer 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

Answer 2

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

const params = useParams();

Answer 3

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

Answer 4

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

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

window.location

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

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

这将记录 6CeJGSm7dBTABs8rRBJh

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

4 个答案: