Reactjs ReactiveSearch在DataSearch中选择一个要约，然后重定向到有ResultCard结果要约的搜索页面

Question

当用户在首页中选择要约时，我尝试打开一个新页面/ search /，其中搜索页面包含与在Datasearch中选择的关键字相关的要约。

我在首页标题中使用了Datasearch，用户在其中写或选择一个现有商品，然后当他按OK / Enter时，他将被重定向到下一个页面。ResultCards包含与该关键字相关的一系列商品：

这是我在首页上进行的数据搜索：

    constructor (props) {
    super(props);
    this.state = {
      SearchQuery: "",
      queryChanged: false,
      value: "",
      redirect: false 

    };

  }

  render() {
    const { value } = this.props;
    const { redirect } = this.state;
    if (redirect) {
      return <Redirect to={`search/${this.state.SearchQuery}`}/>;
    }
    return (     
      <div className="header-header-search-bar-input">     
        <DataSearch
          componentId="SearchSensor"
          dataField={['modele', 'marque', 'titre']}
          fieldWeights={[2, 1]}
          categoryField="titre.keyword"
          placeholder="Trouvez une voiture..."
          react={{
            and: ['result_card', 'carsmodel', 'carsbrand', 'cardate', 'drivenrange', 'ratingsSensor', 'pricerange'],
          }}
          showFilter
          showClear
          filterLabel="Recherche"
          className="headerTopSearch"
          queryFormat="and"
          URLParams={true}
          innerRef={this.innerRef}

          onQueryChange={
            function(prevQuery, nextQuery) {

            console.log('prevQuery', prevQuery);
            console.log('nextQuery', nextQuery);

          }}
          onValueSelected={(value, cause, source) => {
            console.log("onValueSelected_value:",value);
            this.state.SearchQuery = value;
            console.log("SearchQuery", this.state.SearchQuery);
            this.setState({redirect:true});
            }
          }
          onValueChange={
            function(value) {
              console.log("onValueChange value: ", value)
            }
          }    
    />
      </div>
    );
  }
}

这是searchPage中的ResultCard代码：

    constructor(props) {
super (props);
this.state = {
  queryChanged: false,
  initialQuery:
    '{"query":{"bool":{"must":[{"bool":{"must":[{"range":{"annee":{"gte":1986,"lte":2018,"boost":2}}},{"range":{"kilometrage":{"gte":0,"lte":500000,"boost":2}}},{"range":{"prix":{"gte":0,"lte":400000,"boost":2}}}]}}]}},"size":12,"from":0,"sort":[{"inseredate":{"order":"desc"}}]}',
  queryToSave:"",
  SearchQuery:"",

};
this.onData = this.onData.bind(this);
this.customQuery = this.customQuery.bind(this);
this.queryChanged = this.queryChanged.bind(this);


}
  onData(data) {
    const url = sha256(data.url);
    console.log('data:', data);
    console.log("url",url);
    const urlan = `/search/${data.marque}/${data.modele}/${url}`;
    console.log("urlan",urlan);
    return {  
      title: <div 
                  className="title-card" 
                  dangerouslySetInnerHTML={{ __html: data.titre }} 
                />,
      description: (
        <HomePageCard data={data} />
      ),
      image: data.url_image[0],
      url: urlan,
    };
  }

  customQuery(value, props) {
    console.log(value); //return undefined
    console.log(props); //return undefined
    //const query = this.props.search.SearchQuery; //I am not sure of this
    return JSON.parse(query);
  }

  queryChanged(prevQuery, nextQuery) { 
    console.log(prevQuery);
    console.log(nextQuery);
  }

  render() {
    const { defaultQuery } = this.props;
    console.log('defaultQuery:', defaultQuery);
    return (
      <div className="search-search-result-cards">
        <ResultCard
          componentId="result_card"
          className="autorobot-cards"
          size={13}
          pages={4}
          dataField="modele.keyword"
          pagination={true}         
          sortOptions={[
            { label: 'Les plus récentes', dataField: 'inseredate', sortBy: 'desc' },
            { label: 'Les plus anciennes', dataField: 'inseredate', sortBy: 'asc' },
            { label: 'Prix le plus bas', dataField: 'prix', sortBy: 'asc' },
            { label: 'Prix le plus élevé', dataField: 'prix', sortBy: 'desc' },
          ]}
          onQueryChange={(prevQuery, nextQuery) => {
            this.queryChanged(prevQuery, nextQuery);
          }}
          react={{
            and: ["SearchSensor"]
          }}
          innerClass={{
            title: 'text-title',
            listItem: 'cardItem',
            sortOptions: 'sortOptions',
            pagination: 'paginationCards',
          }}
          onData={this.onData}
          customQuery={this.customQuery}
          defaultQuery={this.customQuery}
          target="_blank"
          onNoResults="Aucun résultat trouvé."
          showResultStats={false}
          URLParams={true}
        />
      </div>
    );
  }
}

这是搜索页面的路线：

path: '',
  name: '',
  childRoutes: [
    { path: '/search/:SearchQuery', name: 'Home page search', component: HomePageSearch },
  ],
};