-
Notifications
You must be signed in to change notification settings - Fork 0
/
wrapPageElement.tsx
36 lines (33 loc) · 1.11 KB
/
wrapPageElement.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import { GatsbyBrowser, navigate } from 'gatsby'
import React from 'react'
import { QueryParamProvider } from 'use-query-params'
function generatePath(location) {
return location.pathname + location.search
}
const history = {
push: (location) => {
navigate(generatePath(location), { replace: false, state: location.state })
},
replace: (location) => {
navigate(generatePath(location), { replace: true, state: location.state })
},
}
export const wrapPageElement: GatsbyBrowser['wrapPageElement'] = ({
element,
props: { location },
}) => {
// Make sure the URLs look nicer.
// Ref to the wrapper library https://github.com/pbeshai/use-query-params/pull/88/files
// `encode` option in query-string https://github.com/sindresorhus/query-string#encode
// `strict` option in query-string https://github.com/sindresorhus/query-string#strict; not sure if this does something
const stringifyOptions = { encode: false, strict: false }
return (
<QueryParamProvider
history={history}
location={location}
stringifyOptions={stringifyOptions}
>
{element}
</QueryParamProvider>
)
}