web-dev-qa-db-ja.com

React-routerリンク、パラメーターを渡す

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

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

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

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

<Route path={MY_ROUTE} />

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

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

しかし、paramsは完全に無視されます...そして、クエリはクエリ（？userId =）をパラメータではなく単に作成します...任意のアイデア？

reactjsreact-routerreact-router-redux
15
Elliot

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

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

<Link to>、onEnter、isActiveはロケーション記述子を使用します

<Link to>は、文字列に加えて位置記述子を使用できるようになりました。クエリと状態のプロパティは廃止されました。

// 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です。

Router Link API

8
Elod Szopos

私はこれが古い質問であることを知っていますが、React Router V4では path-to-regexp パッケージ。これはReact Router V4でも使用されています。

例：

import {Link} from 'react-router-dom';
import {compile} from 'path-to-regexp';

const MY_ROUTE = '/users/:userId/';
const toPath = compile(MY_ROUTE);

// Now you can use toPath to generate Links dynamically
// The following will log '/users/42' to the console
console.log( toPath({ userId: 42 }) );

もちろん、toPathメソッドを使用して適切なリンクを作成することもできます。例：

<Link to={toPath({ userId: 42 })}>My Link</Link>
5
bummzack

次のように、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

4
NickGnd