解決済み: ルーターの URL パラメータに反応する

React Router の URL パラメータに関連する主な問題は、動的ルートでの使用が難しいことです。 これは、URL パラメーターが静的であり、ルートの作成後に変更できないためです。 これは、ユーザーが異なるパラメーターを使用して別のページにアクセスする必要がある場合、パラメーターの組み合わせごとに新しいルートを作成する必要があることを意味します。 さらに、URL パラメーターを使用する場合、考えられるすべての組み合わせを追跡し、それぞれがルーターによって適切に処理されることを確認することは困難な場合があります。

import {
  BrowserRouter as Router,
  Route,
  Link,
  useParams
} from "react-router-dom";

 const App = () => {

   return (
     <Router>
       <div>

         <Route path="/user/:username" component={UserPage} />

       </div>
     </Router>
   );

 };

 const UserPage = () => {

   let { username } = useParams(); // Get the username from the URL.

   return (
     <div>Hello, {username}!</div> // Render a greeting with the username. 
   );

 };

このコードは、URL からのユーザー名でページをレンダリングするように React Router を設定しています。

1. 最初の行は、React Router DOM ライブラリからコンポーネントをインポートします。
2. App 関数は、内部に Route コンポーネントを含む Router コンポーネントを返します。これは、「/user/」で始まるすべての URL が UserPage コンポーネントをレンダリングする必要があることを指定します。
3. UserPage 関数は、useParams() を使用して URL からユーザー名を取得し、そのユーザー名を使用してグリーティングをレンダリングします。

URL パラメータ

React Router の URL パラメータは、URL の一部としてルートに渡されるデータの一部です。 開発者は、ID やクエリ文字列などの動的情報をルートに渡すことができます。 これを使用して、データベースから特定のアイテムを表示したり、ユーザー入力に基づいてコンテンツをフィルタリングしたりするために使用できる動的ルートを作成できます。 React Router は、URL パラメーターにアクセスして操作するためのツールを提供し、アプリケーションで簡単に使用できるようにします。

React のルートから URL パラメータを取得するにはどうすればよいですか?

React Router では、useParams フックを使用してルートから URL パラメータにアクセスできます。 このフックは、URL パラメーターのキーと値のペアを含むオブジェクトを返します。 たとえば、ルートが /user/:id の場合、useParams().id で id パラメータにアクセスできます。

関連記事：

コメント