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

Question

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

示例：https://localhost:3000/checkout?coupon=FREE3000&referre=MATTHEW；

我希望能够解析URL以获取参数Coupon&Referrer在状态中设置，并在签出页面中预填充表单。

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

Answer 1

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

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");

请参阅react router文档中的此示例

如果您不想使用react router，只需使用window.location.search属性而不是useLocation。参见MDN文档

Answer 2

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

有关如何获取查询参数的答案，请参阅此问题如何在react router v4 中获取查询参数