17

次のようなルートがある場合：

<Route path="/users/:userId" />

次に、そのルートをエクスポートすると、次のようにアプリ全体で使用できます。

export const MY_ROUTE = '/users/:userId/';

<Route path={MY_ROUTE} />

リンクのパラメーターを動的に設定するにはどうすればよいですか? つまり、私はこれをしたいと思います:

<Link to={MY_ROUTE} params={{userId: 1}} />

しかし、paramsは完全に無視されます...そして、クエリは単にクエリ(?userId=)をパラメータではなくします...何かアイデアはありますか?

4

3 に答える 3

9

React Routerの公式ドキュメントから取得：

1.x から 2.x へのアップグレード ガイドから:

<Link to>、onEnter、および isActive は位置記述子を使用します

<Link to>文字列に加えて位置記述子を取ることができるようになりました。query および state props は非推奨です。

// v1.0.x

<Link to="/foo" query={{ the: 'query' }}/>

// v2.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そして、ルートに使用したい場所ならどこでもそれを使用します。

Link以下に、サポートされているパラメーターと、コンポーネントで公開されている API を示します。

ルーターリンク API

于 2016-06-28T20:45:34.303 に答える
5

次のように、パラメーターを補間しuserIdてルートを作成する関数を作成できます。

export const MY_ROUTE = (userId) => `/users/${userId}/`;

<Route path={MY_ROUTE(':userId')} />

そして、あなたのコンポーネントで

<Link to={MY_ROUTE(1)} params={{userId: 1}} />

ここでこのソリューションを試してください: https://jsbin.com/pexikoyiwa/edit?js,console

于 2016-06-28T20:57:05.790 に答える