次のようなルートがある場合:
<Route path="/users/:userId" />
そして、そのルートをエクスポートすると、次のようにアプリ全体で使用できるようになります。
export const MY_ROUTE = '/users/:userId/';
<Route path={MY_ROUTE} />
リンク内のパラメータを動的に設定するにはどうすればよいですか? つまり、次のようにします:
<Link to={MY_ROUTE} params={{userId: 1}} />
しかし、params は完全に無視されます...そして、query は param ではなくクエリ (?userId=) を作成します...何かアイデアはありますか?
ベストアンサー1
1.x から 2.x へのアップグレード ガイドより:
<Link to>、onEnter、isActiveは位置記述子を使用する
<Link to>文字列に加えて、位置記述子も取得できるようになりました。クエリと状態のプロパティは非推奨です。// バージョン1.0.x
<Link to="/foo" query={{ the: 'query' }}/>// バージョン2.0.0
<Link to={{ pathname: '/foo', query: { the: 'query' } }}/>
残念ながら、オブジェクトを渡すためのサポートはありません。paramこれはあなた自身も見たことがあるでしょう。
提案したルートを動的に使用するには、次のようなことを行う必要があります。
<Link to={ MY_ROUTE.replace(':userId', '<someUserIdFromSomewhere>') }/>
MY_ROUTEまたは、 の文字列をエクスポートする代わりに、userLink次のように関数をエクスポートすることで、さらに最適化することもできます。
function userLink(userId) {
return `/users/${userId}/`;
}
Linkそして、ルートにを使用したい場所でそれを使用します。
以下に、コンポーネントで公開されているサポートされているパラメータと API を示しますLink。