Add Get Query Params From The Request URL as a Remix TIL

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)

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)