React-Router の「Link」コンポーネントで Props を渡すにはどうすればよいですか?

React-Router の "Link" でプロパティを渡す

React-Router で React を使用する場合、次を使用して新しいビューにプロパティを渡すことができます。 内の変更された構文Component.

React-Router v4 および v5 で更新された構文

React-Router v4 および v5 で props を渡すには、次の構文を使用します:

<Link to={{ pathname: path, query: queryObject, search: searchString }}>
  ...
</Link>

ここで:

• pathname は新しいビューへのパスです。
• query はクエリ パラメータを含むオブジェクトです。
• search は、 ?foo=bar などのクエリ文字列。

宛先コンポーネントの Props へのアクセス

宛先コンポーネントでは、次の手法を使用してリンクします。

withRouter 上位コンポーネントの古い使用法:

• 宛先コンポーネントを withRouter でラップし、 match および location props:

const NewView = withRouter(OriginalView);

フックを使用した現在の実装:

• 機能コンポーネント内で useParams フックと useLocation フックを使用して、 match および location props:

const NewView = () => {
  const { testvalue } = useParams();
  const { query, search } = useLocation();

  return (
    <div>
      {testvalue} {query.backUrl}
    </div>
  );
};

Example

次の例を考えてみましょう:

App.js:

<Link to={{ pathname: '/ideas/:testvalue', query: { testvalue: 'hello' } }}>Create Idea</Link>

CreateIdeaView.js:

const CreateIdeaView = () => {
  const { testvalue } = useParams();
  console.log(testvalue); // prints 'hello'

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

この例では、[Create Idea] リンクをクリックすると、値 hello を持つプロパティ testvalue が CreateIdeaView コンポーネントに渡されます。

注:

• リンク コンポーネントのパスには、パラメーター プレースホルダーを含める必要があります。 path: '/ideas/:testvalue'.
• useParams フックは、パスで定義されたすべてのパラメーターを含むオブジェクトを返します。
• useLocation フックは、現在の場所に関する情報を含むオブジェクトを返します。クエリと検索が含まれます。
• クエリはキーと値のペアを含むオブジェクトですが、検索文字列にはクエリ文字列全体が含まれます。

以上がReact-Router の「Link」コンポーネントで Props を渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。