ダイナミックルーティング?

ルーティングパスに特定の値を追加して、対応するページにナビゲートできます.例えば、商品リストページから商品詳細ページに移動する際に使う機能!
reactは基本的にルーティングシステムを備えていないため、react-router-domなどの追加ライブラリをインストールしてルーティング機能を追加する必要があります.ダイナミックパスを扱う方法としては,Path ParameterとQuery Parameterがある.

1.Path Parameter

localhost:3000/product/2 localhost:3000/product/45の2,45のように経路末尾id値を格納するパラメータをpathパラメータと呼ぶ.

<Route exact path='/product/:id' component={productDetail} />

:path parameterが来ることを示し、idは変数名として指定できます
path=「/product/:id」に従ってURLが/product/1に変わり、ProductDetailコンポーネントはidが1の項目に関する情報をバックエンドに要求し、そのdetailページに移動します.
では、detailsコンポーネントはどのようにして取得しますか?

history、match、locationオブジェクト

履歴ページ移動を含む様々な方法.(ex, push)

match Path Parameterに関する情報が含まれています.

locationには、現在のurlパスの情報が含まれます.

(この場合、history、match、locationオブジェクトを指定する場合は、withRouter関数のパラメータで構成部品を受信するか、Routeに直接接続する必要があります.)

		render() {
		 console.log(this.props.match.params.id) // 1
		return (

このようにmatchオブジェクトを使用してインポートできます.Path Parameterとして指定した値をmatchオブジェクトに含め、id値として確認できます.
monster課題による例
'Route.js'

<Route exact path="/monsters/detail/:id" component={MonsterDetail} />

id値を保存するパラメータidを設定する
'Card.js'

class Card extends Component {
  goToDetail = () => {
    this.props.history.push(`/monsters/detail/${this.props.id}`);
  };
  render() {
    return (
      <div className="card-container" onClick={this.goToDetail}>
        <img
          src={`https://robohash.org/${this.props.id}?set=set2&size=180x180`}
          alt=""
        />
        <h2>{this.props.name}</h2>
        <p>{this.props.email}</p>
      </div>
    );
  }
}

goToDetail関数でidを渡します.
'MonsterDetail.js'

componentDidMount() {
    fetch(
      `https://jsonplaceholder.typicode.com/users/${this.props.match.params.id}`
    )
      .then((res) => res.json())
      .then((res) => this.setState({ monsters: res }));
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.match.params.id !== this.props.match.params.id) {
      fetch(
        `https://jsonplaceholder.typicode.com/users/${this.props.match.params.id}`
      )
        .then((res) => res.json())
        .then((res) => this.setState({ monsters: res }));
    }
  }

this.props.match.params.idによりid値が受信されたことがわかります.

2番目のモンスターをクリックすると

2番目のMonsterのdetailsページに移動します!