我可以使用 React-Router-Dom useParams() 在 MERN 应用程序中捕获优惠券代码吗？答案

【问题标题】：Can I use React-Router-Dom useParams() to capture a coupon code in a MERN Application?我可以使用 React-Router-Dom useParams() 在 MERN 应用程序中捕获优惠券代码吗？
【发布时间】：2021-03-07 15:11:36
【问题描述】：

我一直试图弄清楚如何使用 react-router-dom 的 URL 参数来捕获优惠券代码。我希望能够在 URL 中捕获优惠券以设置状态。

示例：https://localhost:3000/checkout?coupon=FREE3000&referrer=MATTHEW;

我希望能够解析 URL 以获取参数 Coupon 和 Referrer 以在状态中设置，并在结帐页面中预填写表单。

这可以使用 React Router Dom 吗？有其他解决方案吗？

【问题讨论】：

标签： javascript node.js reactjs state url-parameters

【解决方案1】：

是的，这可以通过带有自定义钩子和 useLocation 钩子的反应路由器来实现。无论如何，您将使用URLSearchParams。反应路由器没有直接功能。

const useQuery = () => new URLSearchParams(useLocation().search)

// use in component
const query = useQuery();

// get desired value with query.get(name)
const coupon = query.get("coupon");
const referrer = query.get("referrer");

参考这个example from the react router docs

如果你不想使用 react 路由器，只需使用 window.location.search 属性而不是 useLocation。见MDN documentation

【讨论】：

【解决方案2】：

简短的回答是否定的，useParams 获取基本 url 之后的参数而不是查询参数。

有关如何获取查询参数的答案，请参阅此问题How to get query parameters in react-router v4

【讨论】：