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

Question

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

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

我希望能够解析URL，以获取参数优惠券和引用者设置在状态，并预先填充在结帐页面中的表单。

是否可以使用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");

请参阅此example from the react router docs

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

Answer 2

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

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