我如何使用 reactjs 从 URL 中提取 id 参数

Question

http://localhost:3000/messages/?qr_asset_id=1f6b997464&gts=1627828213 这是一个 URL，我需要从此 URL 中提取 qr_asset_id 值 我如何用 reactjs 做到这一点

Answer 1

你把它从道具中拉出来。 props.match.params.qr_asset_id

Answer 2

当你使用基于你使用过的标签的钩子时：

const location = useLocation();

const urlParams = new URLSearchParams(location.search);
const paramValue = urlParams.get('qr_asset_id');

Answer 3

您可以使用 URLSearchParams。

首先检查浏览器的兼容性

const url = window.location.href // "http://localhost:3000/messages/?qr_asset_id=1f6b997464&gts=1627828213";
const searchParams = new URLSearchParams(url);

const qrAssetId = searchParams.get("qr_asset_id"); // 1f6b997464

query parameter react-router 指南应该会有所帮助。

那里也有 url-polyfill 库。您可以使用它们来获得相同的结果。

• url-polyfill
• whatwg-url