TIL -反応ルータ2:ダイナミックURLパラメータ

URLパラメータは、値がページのURLに動的に設定されるパラメータです.これにより、ルートが同じコンポーネント(UI)をレンダリングすることができますが、そのコンポーネントを渡すと、URLの動的部分がオフになります.

クリエイトア<Route>

 <Route path="/user-profile/:tool/:name" component={UserProfile} />

ツールとパスの名前部分は変数パラメータと見なされます.

設定する<Link> to

             <li>
              <Link to="/user-profile/Github/Leonor">Leonor Git</Link>
            </li>
            <li>
              <Link to="/user-profile/Github/Diana">Diana Git</Link>
            </li>
            <li>
              <Link to="/user-profile/Codesandbox/Leonor">Leonor Sandbox</Link>
            </li>
            <li>
              <Link to="/user-profile/Codesandbox/Diana">Diana Sandbox</Link>
            </li>

反応ルータは、パスの形を比較し、正しいものを選択します.

paramsオブジェクトの値を取得する

反応ルータV 4がコンポーネントをレンダリングするときはいつでも、それはそのコンポーネントに3つの小道具、マッチ、場所と歴史を通過します.

URLはあなたのアドレスバーの実際の相対パスです

パスは、その名前が示すように、マッチしたルートのパス::

isexactは、これが正確なマッチであるかどうかを示すブール値です.実際のパスがパス属性として多くのセグメントを持っているので、ここでは本当ですもし我々の現在のURLが/desdesbox/ダイアナ/surnameであったならば、ルートは活性化されたでしょう、しかし、isexactはfalseであるでしょう.

paramsはオブジェクトです.あなたがそれを展開するならば、あなたはそれを見ます、我々はマッチの特性としてURLパラメタ(ID)をつかむことができます.PARAM

const params = props.match.params;
      <h2>
        {params.name}s {params.tool} Profile
      </h2>

Useparamsフック

useParams URLパラメーターのキー/値ペアのオブジェクトを返します.マッチにアクセスするために使用します.現在のパラメータ<Route> .

const About = () => {
  const { name } = useParams()

return (
  // props.match.params.name
  <>
     <h1>About {name}</h1>
  </>
)
};

URLパラメータの使用

ポストリストで.JSは偽のブログ記事のリストを追加します.

const allPosts = [
  { year: '2019', month: '09', title: 'React Router v5.1 released' },
  { year: '2019', month: '09', title: 'React 16.10.0 released' },
  { year: '2019', month: '10', title: 'React Conf 2019' },
  { year: '2019', month: '10', title: 'Transition of Node.js 12 to LTS' }
];

次に、コンポーネントの内容をまとめます.

function PostList(props) {
  // Get the URL parameters
  const params = props.match.params;
  // Filter allPosts array: keep posts who have the
  // same month AND same year as the URL parameters
  const filteredPosts = allPosts.filter(
    post => post.year === params.year && post.month === params.month
  );
  return (
    <div>
      <h2>Posts for {params.month}/{params.year}</h2>
      {
        filteredPosts.map(post => (
          <h3>{post.title}</h3>
        ))
      }
    </div>
  );
}

我々がすべてのポストに適用するフィルタは、最もおもしろい部分です.フィルタはすべての投稿を繰り返しますその「基準」すなわち、それがPAREMeterとして与えられる機能は、各々のポストがこの状態に従うかどうかチェックします:ポストの年と月は、URLの年と月に匹敵しますか?もしそうならば、ポストオブジェクトは保持されて、filteredpostに存在します.
最後に、FilteredPostにマップを適用して、一致する記事のタイトルを表示します.