diff --git a/README.md b/README.md index b26313f..1f7a531 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ pairing with smart people at Hashrocket. For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186). -_1205 TILs and counting..._ +_1206 TILs and counting..._ --- @@ -915,6 +915,7 @@ _1205 TILs and counting..._ ### Remix +- [Get Query Params From The Request URL](remix/get-query-params-from-the-request-url.md) - [Relative And Absolute Paths In Links](remix/relative-and-absolute-paths-in-links.md) - [Run The Development Server From Another Port](remix/run-the-development-server-from-another-port.md) - [Set The Title Of A Page](remix/set-the-title-of-a-page.md) diff --git a/remix/get-query-params-from-the-request-url.md b/remix/get-query-params-from-the-request-url.md new file mode 100644 index 0000000..0ea9489 --- /dev/null +++ b/remix/get-query-params-from-the-request-url.md @@ -0,0 +1,33 @@ +# Get Query Params From The Request URL + +You can enable a Remix route to respond to query params in the URL in a +`loader` function. To do this, you first need to parse them out of the request +URL. + +The arguments to the `loader` function will include the `request` object which +itself includes the `url`. From there, you can use the browser's [`URL` +constructor](https://developer.mozilla.org/en-US/docs/Web/API/URL/URL) to parse +and extract query params (i.e. search params). + +```typescript +import type { LoaderFunction } from "@remix-run/node"; + +export async function loader({ request }): LoaderFunction { + const url = new URL(request.url); + const query = url.searchParams.get("q"); + + results = await getResultsForQuery({ query }); + + return { result }; +} +``` + +The constructed `URL` object responds to +[`searchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams) +which you can call `get()` on to get a specific query param value. This uses +the [`URLSearchParams` +API](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams). + +In the above case, we are able to grab the value of the `q` query param. + +[source](https://remix.run/docs/en/v1/guides/data-loading#url-search-params)