React コンポーネントでルーティング パラメータを取得する例を共有する

この記事では、React がコンポーネント内の ルーティング パラメーター を取得する方法について詳しく説明します。これには、特定の参考値があります。興味のある方は、動的を除く

ルーティング パラメーター を参照してください。ページのコンテンツ、他のページ部分は同じです。この時点でルーティングとコンポーネントをどのように設定する必要がありますか?

このシナリオでは、ルーティング パラメーター関数を使用し、パラメーターを含むルーティング構成を追加する必要があります。

import List from './component/list';

<Route path="list/:id" component={List} />

パス

attribute

の:idはルートのパラメータ(param)であることに注意してください。リストページのコンポーネントを見てみましょう。

/list 对应了 list.js

import React from 'react';
class List extends React.Component {
 render () {
 return (
 <p>
 <h3>This is List page.</h3>
 <p>The list page id is 
  <b style={{color: &#39;red&#39;}}>{this.props.params.id}</b>
 </p>
 </p>
 );
 }
};
export default List;

List コンポーネントでは、this.props.params.id を通じて実際のパラメータ値に直接アクセスできます (ここでの id キーは、React Router がルーティングするパスを定義する :id に対応します)。データは props を通じてページ コンポーネントに渡されるため、ルーティング関連のデータに簡単にアクセスできます。

以上がReact コンポーネントでルーティング パラメータを取得する例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。