Skip to main content

URL Parameter ↔ Extra placeholder data (as key/value pairs) in URL Segment to query Server

aka Query-String, URL-Query-String, Parameter

URL Parameter typically denoted by ?key=value JS Syntax, concatenated by &

UTM Parameter​

5 variants for URL Parameter to track marketing campaign vs traffic source

References​

  1. search ↔ Query String for current window location

  2. useSearchParams() ↔ React Router Hook to return [ searchParams ] with method to .get() Query String values

  3. [

`":_id"
"/settings/:_id"`
```](id-settings-id) ↔ to set **`:id`** [<span data-tooltip-id="preview__q8weT2R5ufxFgAL8i">URL Parameter</span>](url-parameter) [<span data-tooltip-id="preview__KZJ29dW5Q88xpMhde">`path`</span>](path) as [<span data-tooltip-id="preview__RaaW37JDFQLpddE7q">Dynamic Route</span>](dynamic-route) 

4. [`useParams()`](useparams) ↔ 

```tsx
[<span data-tooltip-id="preview__Cnktk6mYSBeWLB3L3">React Router Hook</span>](react-router-hook) to return **{ **[<span data-tooltip-id="preview__q8weT2R5ufxFgAL8i">URL Parameter</span>](url-parameter)** }** set via [<span data-tooltip-id="preview__8SFKoXqHBqf5cDcvB">`":_id"
"/settings/:_id"`</span>](id-settings-id) in [<span data-tooltip-id="preview__KZJ29dW5Q88xpMhde">`path`</span>](path)

  1. Dynamic Route ↔ Route with dynamic content vs URL Parameter ie [id].tsx

  2. [id].tsx ↔ ( Next 12 ) FC to export default Page with Dynamic Route with _id URL Parameter

  3. UTM Parameter ↔ 5 variants for URL Parameter to track marketing campaign vs traffic source