Javascript 如何通过历史记录发送对象。推送到I'；m被重定向到|反应

我有一个来自搜索栏的对象（结果），我正试图通过历史记录发送。推到搜索结果页面，我无法通过重定向到的页面上的道具访问该对象。对于我来说，什么是重定向到下一页并能够访问我试图发送到那里的结果的最简单方法

import React, {Component} from 'react';
import {Search, List, Form} from 'semantic-ui-react';
import {browserHistory,withRouter} from "react-router-dom"
import axios from 'axios';

class SearchBar extends Component {
  constructor(props) {
    super(props)
    this.state = {query: '', results: [], isLoading: false}
  }

  componentWillMount() {
     this.resetComponent()
   }

   resetComponent = () => this.setState({ isLoading: false, results: [], query: '' })

   search(query) {
     this.setState({ query });
     axios
       .get(`/api/search?query=${query}`)
       .then(response => {
         this.setState({ results: response.data});
       })
       .catch(error => console.log(error));
   }

   handleFormSubmit = () => {
   console.log('search:', this.state.query);
   this.props.action
   this.props.history.push({pathname: `/search/${this.state.query}`, results: `${this.state.results}`})
   this.resetComponent()



 }


  handleInputChange = (query) => {
    this.search(query);
    this.setState({ isLoading: true, query })

    setTimeout(() =>
      this.setState({
        isLoading: false,
      }) , 300)

  }

  handleResultSelect = (e, { result }) => this.setState({ query: result.title}  )

  render () {

    const resultRenderer = ({ title }) => <List content = {title}/>
    return (

      <Form onSubmit={this.handleFormSubmit}>
      <Search
        loading={this.state.isLoading}
        onResultSelect={this.handleResultSelect}
        onSearchChange={(event) => {this.handleInputChange(event.target.value)}}
        showNoResults={false}
        value={this.state.query}
        resultRenderer={resultRenderer}
        results ={this.state.results}
        type={"submit"}
        { ...this.props}  />
      </Form>

    );
  }

}


export default withRouter (SearchBar)

import React，{Component}来自'React'；
从“语义ui反应”导入{Search，List，Form}；
从“react router dom”导入{browserHistory，withRouter}
从“axios”导入axios；
类搜索栏扩展组件{
建造师（道具）{
超级（道具）
this.state={查询：“”，结果：[]，isLoading:false}
}
组件willmount（）{
此文件名为resetComponent（）
}
resetComponent=（）=>this.setState（{isLoading:false，结果：[]，查询：'}）
搜索（查询）{
this.setState（{query}）；
axios
.get（`/api/search？query=${query}`）
。然后（响应=>{
this.setState（{results:response.data}）；
})
.catch（错误=>console.log（错误））；
}
handleFormSubmit=（）=>{
log（'search:'，this.state.query）；
这是道具行动
this.props.history.push（{pathname:`/search/${this.state.query}`，results:`${this.state.results}}}}）
此文件名为resetComponent（）
}
handleInputChange=（查询）=>{
这个。搜索（查询）；
this.setState（{isLoading:true，query}）
设置超时（（）=>
这是我的国家({
孤岛加载：false，
}) , 300)
}
handleResultSelect=（e，{result}）=>this.setState（{query:result.title}）
渲染（）{
const resultRenderer=（{title}）=>
返回(
{this.handleInputChange（event.target.value）}
showNoResults={false}
值={this.state.query}
ResultTrenderer={ResultTrenderer}
结果={this.state.results}
类型={“提交”}
{…this.props}/>
);
}
}
使用路由器导出默认值（搜索栏）

最好的方法是使用状态容器进行react。有几个库用于此，但是Redux是与react一起工作的最常见的东西

其思想是将react应用程序的数据集中在一个地方，以便您可以在应用程序中的任何地方访问它

Redux是JavaScript应用程序的可预测状态容器。（不必 与WordPress框架混淆–Redux框架。）

它可以帮助您编写行为一致的应用程序，并在 不同的环境（客户端、服务器和本机），并且易于 测试。除此之外，它还提供了良好的开发人员体验，例如 作为实时代码编辑与时间旅行调试器相结合

您还可以访问一些教程开始学习：

---

Ref:

最好的方法是使用状态容器进行react。有几个库用于此，但是Redux是与react一起工作的最常见的东西

其思想是将react应用程序的数据集中在一个地方，以便您可以在应用程序中的任何地方访问它

Redux是JavaScript应用程序的可预测状态容器。（不必 与WordPress框架混淆–Redux框架。）

它可以帮助您编写行为一致的应用程序，并在 不同的环境（客户端、服务器和本机），并且易于 测试。除此之外，它还提供了良好的开发人员体验，例如 作为实时代码编辑与时间旅行调试器相结合

您还可以访问一些教程开始学习：

---

Ref:

您可以通过两种方式使用

history.push

：使用两个参数、一个路径和一个可选状态

history.push（路径、[state]）

或包含一个或多个属性

{pathname、search、hash、state}

的

位置
对象。无论采用哪种方式，将自定义数据发送到下一个位置的方式都是通过位置对象的
状态
。您已经接近了，只需更改此行：

this.props.history.push({pathname: `/search/${this.state.query}`, results: `${this.state.results}`})

对此

this.props.history.push({pathname: `/search/${this.state.query}`, state: {results: `${this.state.results}`}})

然后，您可以通过
props.location.state
访问下一个组件中的数据。您可以通过两种方式使用
history.push
：使用两个参数、路径和可选状态
history.push（路径、[state]）
或包含一个或多个属性的
location
对象
{pathname，search，hash，state}
。无论采用哪种方式，将自定义数据发送到下一个位置的方式都是通过location对象的
state
。您已经关闭了，只需更改此行：

this.props.history.push({pathname: `/search/${this.state.query}`, results: `${this.state.results}`})

对此

this.props.history.push({pathname: `/search/${this.state.query}`, state: {results: `${this.state.results}`}})

然后您可以通过
props.location.state
访问下一个组件中的数据。将对象发送到pushState是可以的，但请记住，通过方法发送对象有一个限制。例如，firefox只允许640k字符的大小限制。@DatTran有趣，我不知道。我没有遇到任何麻烦有了它，
history
的文档没有指定任何类型的限制，可能是对常规popState的抽象，允许更大的对象（很可能）。无论如何，是的，我不会使用此方法发送大型数据集；它用于发送重定向url或某些搜索筛选器等内容，不需要大状态容器的小内容。将对象发送到pushState是可以的，但请记住，它对通过方法发送对象有限制。例如，firefox只允许大小此限制为640k个字符。@DatTran有趣，我不知道。我没有遇到任何问题，而且
历史
的文档没有指定任何类型的限制，可能是对常规popState的抽象，允许更大的对象（很可能）.无论如何，是的，我不会使用这种方法来发送大数据集；它是用来发送重定向url或一些搜索过滤器之类的东西的，这些小东西不需要大数据集