我可以使用 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

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

有关如何获取查询参数的答案，请参阅此问题

Answer 2

是的，这可以通过带有自定义挂钩的 React 路由器和 useLocation hook. Anyways you will use 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

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

Can I use React-Router-Dom useParams() to capture a coupon code in a MERN Application?

javascript

state

url-parameters

node.js

reactjs