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