React Router v6 で URL パラメーターとクエリ文字列をマスターする

React Router v6 の URL パラメーターとクエリ文字列

URL パラメーターとクエリ文字列は、Web アプリケーションにおける URL 管理の重要な側面です。これらを使用すると、動的データをさまざまなルートに渡し、そのデータに基づいてルーティングを管理できます。 React Router v6 は、URL パラメーター と クエリ文字列 の処理を​​シームレスにサポートし、より動的で柔軟なアプリケーションを構築できるようにします。

---

1. React Router v6 の URL パラメーター

URL パラメータは、ルート パラメータ または 動的パラメータ とも呼ばれ、動的な値を取得するために使用できる URL の一部です。これらは通常、特定のリソースまたはエンティティを識別するために使用されます。

URL パラメータの例:

/profile/:username のようなルートの場合、ユーザー名の部分は URL パラメーターです。

ステップ 1: URL パラメーターを使用してルートを定義する

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

const Profile = () => {
  // Use the useParams hook to access URL parameters
  const { username } = useParams();

  return <h2>Profile of {username}</h2>;
};

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/profile/john">John's Profile</Link></li>
          <li><Link to="/profile/sarah">Sarah's Profile</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/profile/:username" element={<Profile />} />
      </Routes>
    </Router>
  );
};

export default App;

説明:

• ルート /profile/:username の :username は URL パラメータです。
• useParams フックは、URL パラメーター (ユーザー名) の値にアクセスするために Profile コンポーネント内で使用されます。
• ユーザーが /profile/john に移動すると、値「john」がパラメータとして渡され、Profile コンポーネントに表示されます。

URL パラメータの重要なポイント:

• 動的ルート マッチング: URL パラメーターを使用すると、動的ルートを照合できます。たとえば、/profile/:username は /profile/john または /profile/sarah と一致します。
• パラメータへのアクセス: useParams を使用して、ルート内のパラメータの値にアクセスします。

---

2. React Router v6 のクエリ文字列

クエリ文字列は、? の後に表示されるキーと値のペアです。 URLにあります。これらは通常、追加情報をサーバーに渡すため、またはルートを変更せずにページの動作を変更するために使用されます。

クエリ文字列の例:

/search?query=React のような URL の場合、クエリ文字列は ?query=React です。

ステップ 1: useLocation を使用したクエリ文字列の処理

React Router v6 では、useLocation フックを使用してクエリ文字列にアクセスできます。 useLocation は、パス名、検索 (クエリ文字列)、ハッシュを含む現在の URL へのアクセスを提供します。

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

const Profile = () => {
  // Use the useParams hook to access URL parameters
  const { username } = useParams();

  return <h2>Profile of {username}</h2>;
};

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/profile/john">John's Profile</Link></li>
          <li><Link to="/profile/sarah">Sarah's Profile</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/profile/:username" element={<Profile />} />
      </Routes>
    </Router>
  );
};

export default App;

説明:

• useLocation: このフックは、パス名、検索 (クエリ文字列)、およびハッシュを含む現在の場所オブジェクトを提供します。
• URLSearchParams: これは、クエリ文字列を解析し、クエリ パラメータの値を抽出するために使用されます。
• この例では、クエリ パラメーターのクエリが URL から抽出され、その値が検索コンポーネントに表示されます。

クエリ文字列の重要なポイント:

• useLocation: クエリ文字列を含む現在の場所にアクセスします。
• URLSearchParams: クエリ パラメーターを解析して抽出するための便利な API。

---

3. URL パラメータとクエリ文字列の組み合わせ

同じルートで URL パラメーターとクエリ文字列の両方を使用することもできます。たとえば、動的なユーザー名に基づいてユーザー プロファイルを表示し、クエリ パラメーターを使用してデータをフィルター処理することができます。

URL パラメータとクエリ文字列の両方を使用した例:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';

const Search = () => {
  // Use the useLocation hook to access the query string
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const query = queryParams.get('query'); // Extract query parameter from the URL

  return (
    <div>
      <h2>Search Results</h2>
      {query ? <p>Searching for: {query}</p> : <p>No search query provided</p>}
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/search?query=React">Search for React</Link></li>
          <li><Link to="/search?query=JavaScript">Search for JavaScript</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/search" element={<Search />} />
      </Routes>
    </Router>
  );
};

export default App;

説明:

• この例では、URL パラメータ username とクエリ文字列 age が /profile/:username?age= で一緒に使用されています。 URL。
• ユーザー名には useParams を使用してアクセスし、年齢フィルターには useLocation と URLSearchParams を使用してアクセスします。

重要なポイント:

• パラメータの結合: URL パラメータとクエリ文字列の両方を結合して、より複雑なルーティング シナリオを作成できます。
• 個別の懸念事項: URL パラメーターは通常、リソースの識別 (ユーザー プロファイルなど) に使用され、クエリ文字列は追加のフィルター処理または構成 (検索クエリ、フィルターなど) に使用されます。

---

結論

React Router v6 では、ルーティング ロジックで URL パラメーター と クエリ文字列 の両方を簡単に処理できます。 useParams フックを使用すると、動的ルート パラメーターに簡単にアクセスでき、useLocation と URLSearchParams はクエリ文字列の管理に役立ちます。これらのツールを理解して効果的に使用することで、強化されたルーティング機能を備えた動的で柔軟な React アプリケーションを作成できます。

---

以上がReact Router v6 で URL パラメーターとクエリ文字列をマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。