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

URL React Router にパラメーターを追加することに関連する主な問題は、ユーザーがパラメーターを簡単に操作できることです。 これは、悪意のあるユーザーがパラメーターを使用して、許可されていないリソースやデータにアクセスする可能性があるため、セキュリティの問題につながる可能性があります。 さらに、パラメーター値が適切に検証されていない場合、アプリケーションで予期しない動作が発生する可能性があります。 最後に、追加するパラメータが多すぎると、URL が複雑になり、パフォーマンスの問題が発生する可能性があります。

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

 <Router>
    <Route path="/user/:username">
      <User />
    </Route>

    <Link to="/user/john">John</Link>

    function User() {
      let { username } = useParams();

      return (
        <div>{username}</div>   // renders 'john' when the link is clicked. 
      );  
    }    

 </Router>

1. 「react-router-dom」から { BrowserRouter を Router、Route、Link、useParams としてインポートします。
// これにより、このコードで使用される react-router-dom ライブラリからコンポーネントがインポートされます。

2. // これにより、異なるルート間のナビゲーションを処理するルーター コンポーネントが作成されます。

3. // これにより、'username' の動的パラメータを持つルートが作成されます。

4. // これは、このルートが一致したときに User コンポーネントをレンダリングします。

5. John // これにより、/user/john ルートへのリンクが作成されます。これは、クリックするとユーザー名パラメーターとして「john」を使用して User コンポーネントをレンダリングします。

6. function User() { //これは、ユーザー名を引数として受け取り、上のリンクをクリックして呼び出されたときに div タグ内にレンダリングする関数コンポーネントです。

7. let { ユーザー名 } = useParams(); //これは、destructuring を使用して、useParams() からユーザー名へのアクセスを取得します。

8.リターン（

{ユーザー名}

); //これは、username に渡された値 (この場合は「john」) を含む div 要素を返します。

Reactルーターとは

React Router は、React アプリケーションのルーティング ライブラリです。 異なるページ間のナビゲーションを備えたシングルページ アプリケーション (SPA) を作成するために必要なコア コンポーネントと機能を提供します。 これにより、開発者は、アプリケーション内の特定のコンポーネントにマップされるパスであるルートを定義できます。 React Router は、リダイレクト、動的ルート マッチング、クエリ パラメータなどの機能も提供します。

URL へのパラメーター

React Router の URL へのパラメーターにより、開発者は動的データを URL から React コンポーネントに渡すことができます。 これは、URL で渡されたパラメーターに基づいてさまざまなコンテンツを表示するために使用できる動的ルートを作成するのに役立ちます。 たとえば、「/user/:id」のようなルートを使用して、URL で渡された id パラメータを持つユーザー プロファイル ページを表示できます。 パラメータは、URL からの動的データを必要とするデータのフィルタリングやその他の操作にも使用できます。

React で URL にパラメータを追加するにはどうすればよいですか

React Router で URL にパラメーターを追加するには、「params」オブジェクトを使用します。 このオブジェクトを使用すると、URL に追加されるキーと値のペアを渡すことができます。 パラメータを追加するには、次のように params オブジェクトに追加するだけです。

const params = { param1: 'value1', param2: 'value2' };

次に、ルートを作成するときに、次のように params オブジェクトを引数として渡すことができます。

このルートに移動すると、パラメーターが URL に追加されます。

関連記事：

コメント