reactでURLからパラメータを取得する方法は？

ReactでURLの後ろのパラメータを取得するには、react-router-domが提供するuseParamsフックを使用できます。

最初に、react-router-domがインストールされていることを確認してください。

npm install react-router-dom

その後、URLパラメータを取得する必要があるコンポーネントで、useParamsをインポートしてください。

import { useParams } from 'react-router-dom';

次に、コンポーネントの関数でuseParamsを使用してURLパラメーターを取得します。

function MyComponent() {
  const params = useParams();
  const { id } = params;

  // 使用获取到的参数进行其他操作
  // ...

  return (
    // 组件的JSX代码
  );
}

上の例では、URLの形式が/example/:idであると仮定します。ここでidは私たちが取得したいパラメータです。

最後に、paramsオブジェクトを使用して取得したURLパラメータにアクセスすることができます。例えば、const { id } = params;という形で取得可能です。この例では、id変数にパラメータを保存して、コンポーネントで他の操作に使用することができます。

コンポーネントにラップされたコンポーネントでしかuseParamsを使用できないことに注意する必要があります。これはreact-router-domが提供するルーティングメカニズムに依存しているためです。