フォームの検索ボタンがクリックされたときにAPIからデータを取得し、ReactJSの別のページにデータを表示します

私はReactJS Webアプリケーションを開発しています。このアプリケーションでは、4つの選択フィールド（[作成]、[モデル]、[最小価格]、[最大価格]）と[検索]ボタンを備えたフォームがあります。検索結果のデータは、オプションの選択に従ってAPIからフェッチされます。ユーザーが検索ボタンをクリックしたときに、カード内の別のページ（ページルートパス：/ search）にそのデータを表示したいと思います。私はreactルーターを使用しています。APIのURL /エンドポイントはhttps://mysterious-journey-51969.herokuapp.com/api/search-vehicle/?q=mercedes&m=sprinter&pf=0&pt=100000です。ここで、「q」フィールドはVehicle Make、「m」フィールドと一致します。モデルに一致し、「pf」フィールドは最小価格に一致し、「pt」フィールドは最大価格に一致します。どうすればそれができますか？

これが私のフォームコンポーネントコードです：

import React, { Component } from 'react';
import { Form, FormGroup, Input } from 'reactstrap';
import { veh_data } from '../shared/vehicle_make_and_models';

const defaultValues = [
    { value: 0, text: 0, key: 1 },
    { value: 500, text: 500, key: 2 },
    { value: 1000, text: 1000, key: 3 },
    { value: 1500, text: 1500, key: 4 },
    { value: 2000, text: 2000, key: 5 },
    { value: 2000, text: 2000, key: 6 }
];

const MIN_TITLE = { selected: true, disabled: true, text: 'Min Price' };
const MAX_TITLE = { selected: true, disabled: true, text: 'Max Price' };

class ImgAndForm extends Component {
    constructor(props) {
        super(props);

        this.handleSearch = this.handleSearch.bind(this);
        this.keyToOption = this.keyToOption.bind(this);
        this.renderOptions = this.renderOptions.bind(this);
        this.handleModelChange = this.handleModelChange.bind(this);

        this.state = {
            minData: [MIN_TITLE, ...defaultValues],
            maxData: [MAX_TITLE, ...defaultValues],

            minValue: null,
            maxValue: null,
            modelSelected: null
        };

    }

    renderOptions(data) {
        return data.map(datum => {
            // this allows us to indicate whether we are selecting or disabling
            const selected = datum.selected || false;
            const disabled = datum.disabled || false;

            return (
                <option key={datum.key} value={datum.value} selected={selected} disabled={disabled}>
                    {datum.text}
                </option>
            );
        });
    }

    handleModelChange(event) {
        console.log(event.target.value);
        this.setState({ modelSelected: event.target.value });
    }

    handleSearch(event) {
        alert("Search button clicked");

    }

    keyToOption(key) {
        return key.split("-")
            .map(word => word.slice(0, 1).toUpperCase() + word.slice(1))
            .join(" ");
    }

    handleMinSelect = event => {
        const value = event.target.value;
        const newMaxValues = [];

        defaultValues.forEach(datum => {
            if (datum.value >= Number.parseInt(value, 10)) {
                newMaxValues.push(datum);
            }
        });

        this.setState({
            maxData: [MAX_TITLE, ...newMaxValues],
            minValue: value
        });
    };

    handleMaxSelect = event => {
        const value = event.target.value;
        this.setState({ maxValue: value });
    };

    render() {

        const vehicles = veh_data.reduce((acc, veh, i) => {
            let make = Object.keys(veh)[0],
                vehModels = veh[make];

            return {
                makes: [
                    ...acc.makes,
                    <option key={make + i} value={make}>{this.keyToOption(make)}</option>
                ],
                models: {
                    ...acc.models,
                    [make]: vehModels.map((model, i) => {
                        return (
                            <option key={make + model + i} value={model}>
                                {this.keyToOption(model)}
                            </option>
                        );
                    })
                }
            };
        }, { makes: [], models: [] });

        const selectedModels =
            this.state.modelSelected && this.state.modelSelected.length ? (
                vehicles.models[this.state.modelSelected]
            ) : (
                    <option value="">Model (select make first)</option>
                );

        return (
            <div>
                <header className="headerbg d-flex">
                    <div className="container my-auto">
                        <div className="row">
                            <div className="offset-1 col-10 offset-lg-0 col-lg-4">
                                <div id="search-form-div" className="container">
                                    <div className="row">
                                        <div className="col-12 my-4">
                                            <h3>Search</h3>
                                            <Form onSubmit={this.handleSearch}>
                                                <FormGroup>
                                                    <Input
                                                        onChange={e => this.handleModelChange(e)}
                                                        type="select"
                                                        name="q"
                                                        id="q"
                                                    >
                                                        <option value="">Make</option>
                                                        {vehicles.makes}
                                                    </Input>
                                                </FormGroup>
                                                <FormGroup>
                                                    <Input type="select" name="m" id="m">
                                                        {selectedModels}
                                                    </Input>
                                                </FormGroup>
                                                <FormGroup>
                                                    <Input type="select"
                                                        name="pf"
                                                        id="pf"
                                                        value={this.state.minValue}
                                                        onChange={this.handleMinSelect}>
                                                        {this.renderOptions(this.state.minData)}
                                                    </Input>
                                                </FormGroup>
                                                <FormGroup>
                                                    <Input
                                                        type="select"
                                                        name="pt"
                                                        id="pt"
                                                        value={this.state.maxValue}
                                                        onChange={this.handleMaxSelect}>
                                                        {this.renderOptions(this.state.maxData)}
                                                    </Input>
                                                </FormGroup>
                                                <FormGroup>
                                                    <Input type="submit" name="search" id="search" className="btn btn-primary" value="Search" />
                                                </FormGroup>
                                            </Form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </header>

            </div>
        );
    }
}

export default ImgAndForm;

これが私の検索結果コンポーネントコードです：

import React, { Component } from 'react';
import Smallheader from './SmallHeader';
import { Card, CardImg, CardTitle, CardSubtitle } from 'reactstrap';

class SearchResult extends Component {
constructor(props) {
    super(props);

    this.state = {
    };
}


render() {

    return (
        <div>
            <Smallheader />
            <div className="my-5">
                <div className="container text-center" id="contactContainer">
                    <div className="row">
                        <div className="col-lg-12 mx-auto">
                            <h2 className="text-center">Search Results</h2>
                            <hr className="my-4 thick-hr" />
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-6 col-lg-3 mt-4">
                            <Card>
                                <a href="#">
                                    <CardImg src="" className="img-fluid" />
                                    <CardTitle>Title Here</CardTitle>
                                    <CardSubtitle>Price Here</CardSubtitle>
                                </a>
                            </Card>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}
}

export default SearchResult;