use-query-paramsを使ってクエリ文字列を扱う

Create React Appで作成したSPAで、クエリ文字列を扱う必要があったので「use-query-params」を利用した。

インストール

yarn add react-router-dom use-query-params query-string

index.tsx設定

• QueryParamProviderを設定する

// src/index.tsx
import React from 'react'
import { hydrate, render } from 'react-dom'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { QueryParamProvider } from 'use-query-params'

import App from './App'

const rootElement = document.getElementById('root')
const AppBase = (
  <React.StrictMode>
    <Router>
      <QueryParamProvider ReactRouterRoute={Route}>
        <App />
      </QueryParamProvider>
    </Router>
  </React.StrictMode>
)

if (rootElement?.hasChildNodes()) {
  hydrate(AppBase, rootElement)
} else {
  render(AppBase, rootElement)
}

App.tsxでクエリ文字列を扱う

• useQueryParam hookでクエリ文字列が取得できる

// src/App.tsx
import React, { useEffect, useRef, useState } from 'react'
import { NumberParam, useQueryParam } from 'use-query-params'

function App() {
  const [timeQueryParam, setTimeQueryParam] = useQueryParam('t', NumberParam)
  const [time, setTime] = useState(0)

  useEffect(() => {
    if (timeQueryParam) {
      setTime(timeQueryParam)
    }
  }, [timeQueryParam])

  return (<div>{time}</div>)
}

export default App

参考

• pbeshai/use-query-params