【React】クエリーパラメーターを取得する【react-router-dom】

Reactでreact-router-domを使ってクエリーパラメーター（URLパラメーター）を取得したい！

概要

今回の記事では、Reactでreact-router-domを使ってクエリーパラメーター（URLパラメーター）を取得する手順を掲載する。

クエリーパラメーター（URLパラメーター）はhttp://example.com/?param=123の?の後ろのparam=123の部分。<Name>=<Value>という感じの書式でパラメーター名と値を表現する。複数のパラメーターを使う場合は<Name1>=<Value1>&<Name2>=<Value2>という感じに&で連結する。

仕様書

環境

node v21.1.0
npm 10.8.1
react 18.3.1
react-dom 18.3.1
react-router-dom 6.24.1

手順書

インストール編と取得編の2部構成です。

インストール編

プロジェクトにreact-app-rewiredをインストールする。

npm install --save react-router-dom

取得編

クエリーパラメーターを取得するのに<Routes>の中で処理を行う必要があるので。index.tsxにルーティングの設定をす。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Route, Routes, BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);

root.render(
    <React.StrictMode>
        <BrowserRouter>
            <Routes>
                <Route path={"/"} element={<App />} />
            </Routes>
        </BrowserRouter>
    </React.StrictMode>
);

reportWebVitals();

app.tsxの中でクエリーパラメーターparamを取得して文字列として出力する。

import React from 'react';
import { useLocation } from 'react-router-dom';

function useQuery() {
    return new URLSearchParams(useLocation().search);
}

function App() {
    let query = useQuery();
    let param = query.get("param");

    return (
        <div>
            {param}
        </div>
    );
}

export default App;

まとめ（感想文）

クエリーパラメーターで渡された値によって処理を変えたい場合に使えるかもね！