Sync your state to your query params for copy-pastable state-in-URLs. React Router, Gatsby, and Svelte versions

react-router-state-manager.jsx

// note - this was my rough working prototype, but still left some artifacts in the query params.
// todo: also need to debounce the history pushes
// see comments for production Gatsby and Svelte versions which delete nondefault keys in the query params

import React from 'react'
import queryString from "query-string"

export const connectRouterState = defaultURLState => Component => props => {
  const { history, location } = props
  // note: do not nest objects in URL state
  const urlState = { ...defaultURLState, ...queryString.parse(location.search) }
  const setURLState = newState =>
    history.push({ search: `?${queryString.stringify({ ...urlState, ...newState })}` })
  return <Component
    setURLState={setURLState}
    urlState={urlState}
    {...props}
  />
}

// usage example - assumes this connected component is provided `location` and `history` by react-router

class MyApp extends Component {
  render() {
    const { urlState, setURLState } = this.props
    return (
      <div>
        <button onClick={() => setURLState({ newState: [1, 2] })}>{JSON.stringify(urlState)}</button>
      </div>
    )
  }
}  

export default connectRouterState({ defaultState: 1 })(MyApp) 

egghead.io has an amazing implementation https://github.com/sw-yx/egghead-next/blob/main/src/lib/__tests__/search-url-builder.test.ts

https://next.egghead.io/s/node-and-react-and-typescript-lessons-by-shawn-wang