React Routerでパラメータを渡す方法

React Router でパラメータを渡す方法: 1. ワイルドカードを使用してパラメータを渡します。渡すことができるのは文字列のみです。ページを更新してもパラメータは失われません。2. クエリを使用してパラメータを渡します。オブジェクトを渡しますが、ページを更新するとパラメータが失われます; 3. 状態を使用してパラメータを渡します。オブジェクト、配列などを渡すことができます。ページが更新されると、パラメータは失われます。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

React Router でパラメータを渡す方法

React Router ルーティングでパラメータを渡すには、ワイルドカード、クエリ パラメータ、および状態パラメータを介してパラメータを渡す 3 つの方法があります。

1. ワイルドカードパラメータの受け渡し

ルート定義方法:

<Route path=&#39;/path/:name&#39; component={Path}/>

リンクコンポーネント:

<Link to="/path/通过通配符传参">通配符</Link>

パラメータ取得:

this.props.match.params.name

利点: シンプルかつ高速で、ページが更新されてもパラメータが失われることはありません。

欠点: 渡すことができるのは文字列だけであり、あまりにも多くの値を渡すと、URL が長くて見苦しくなります。

オブジェクトを転送する場合は、JSON.stringify() を使用して文字列に変換し、別のページで受信した後に JSON.parse() を使用して元に戻すことができます。

2.クエリ

ルート定義方法:

<Route path=&#39;/query&#39; component={Query}/>

リンクコンポーネント:

var query = {undefined
        pathname: '/query',
        query: '我是通过query传值 '
}

<Link to={query}>query</Link>

パラメータ取得:

this.props.location.query

利点: エレガントで転送可能なオブジェクト

欠点: ページを更新するとパラメータが失われます

3、状態

ルート定義方法:

<Link to={state}>state</Link>

リンクコンポーネント:

var state = {undefined
        pathname: '/state',
        state: '我是通过state传值'
    }
    <Route path=&#39;/state&#39; component={State}/>

パラメータ取得:

this.props.location.state

ここthis.props.location.state === 'クエリを通じて値を渡します'

利点: エレガント、オブジェクトを渡すことができます

欠点: ページを更新すると、パラメーターが失われます

推奨される学習: 「react ビデオ チュートリアル 」

以上がReact Routerでパラメータを渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。