使用history.push将数据作为道具发送到其他组件
是一种在React应用中进行页面跳转并传递数据的方法。history.push是React Router库中的一个方法，它可以将指定的路径添加到浏览器的历史记录中，并导航到该路径对应的组件。
在React中，可以通过以下步骤使用history.push发送数据到其他组件：
- 首先，确保已安装并导入React Router库。可以使用以下命令安装React Router：
- 首先，确保已安装并导入React Router库。可以使用以下命令安装React Router：
- 然后，在需要使用history.push的组件中导入相关的模块：
- 然后，在需要使用history.push的组件中导入相关的模块：
- 在组件中使用useHistory钩子函数来获取history对象：
- 在组件中使用useHistory钩子函数来获取history对象：
- 在需要发送数据的地方，使用history.push方法进行页面跳转，并将数据作为参数传递：
- 在需要发送数据的地方，使用history.push方法进行页面跳转，并将数据作为参数传递：
- 这里的'/destination'是目标组件的路径，{ data: yourData }是要传递的数据对象。
- 在目标组件中，可以通过props.location.state来获取传递过来的数据：
- 在目标组件中，可以通过props.location.state来获取传递过来的数据：
- 这样就可以在目标组件中使用receivedData来访问传递过来的数据了。
使用history.push将数据作为道具发送到其他组件的优势是可以实现页面之间的数据传递和页面跳转，方便在不同组件之间共享数据和状态。这在构建复杂的应用程序时非常有用，可以提高开发效率和用户体验。
使用React Router库的相关产品和产品介绍链接地址如下：
相关·内容
因此，我有我的BikeCardContainer，当我单击按钮时，它应该导航到其他页面并发送当前对象数据 handleClick() { pathname: '/Checkout',}); } 我想知道如何在接收页面中访问此数据
浏览 8提问于2021-07-14得票数 2
我需要通过history.push访问作为道具从一个组件传递到另一个组件的数据，当页面重新加载时，数据变得没有定义，而且我不想使用redux，所以任何人都有suggestion..Thankyou！
浏览 5提问于2022-02-27得票数 -1
我在React中构建了一个可重复使用的表单，作为5月应用程序中的登录和登录表单。我正在使用Axios将数据发送到数据库。但是我不能将输入值作为道具发送到我的UserSignIn组件，以便在Axios函数中使用它们。代码如下：AccountForm组件：
import React, { Component } fro
浏览 1提问于2019-01-15得票数 0
我们有一个问题，项目: Symfony 4，Api-Platform，React和其他软件包.我们在控制台日志上得到了一个很好的json响应，但是我们不知道如何检索和传递数据我们遵循上下文API、SWR和其他的路线，但是我们被困住了，所以如果您能帮助我们，我们会非常高兴的。const latLong = [data['lat&#
浏览 0提问于2020-04-14得票数 1
回答已采纳
将从数据库接收到的数据作为道具传递给另一个组件的正确方法是什么？我将把customer.id和customer.name作为支持发送到另一个组件。 const [isloaded, setisLoaded] = useState(false)
histor
浏览 4提问于2020-06-06得票数 1
回答已采纳
我试图使用基组件中定义的一些数据从基本组件推送到另一个组件，这些数据以params形式发送给history.push。</div>)}这是个转折。如果刷新页面，就可以看到正在显示的数据<
浏览 5提问于2017-08-08得票数 1
1.在文章列表组件中，我将“历史”传递给子组件项目单元组件：
在子组件(项目单元格)中，我使用history.push，但出现了错误.this.props.history.push(/detail/
浏览 0提问于2019-05-06得票数 0
回答已采纳
我在函数组件中使用history.push("path/...")时遇到了问题。我的问题是当我试图在按钮处理程序中使用函数组件的参数时。something reusable const history = useHistory(); history.pushonce. const h
浏览 10提问于2021-09-17得票数 4
回答已采纳
我有一个Logout组件，它只呈现一个按钮，该按钮应该将注销操作分派给reducer。如何在不使用redux connect(...)的情况下将分派方法绑定到该组件？或者是使用connect()的最好方法，即使它是像这样的哑巴组件？我的组件看起来像这样，我通过导入存储来使分派方法可用，但感觉并不正确：import { userActions } from '..cla
浏览 20提问于2018-01-05得票数 0
回答已采纳
我正在使用javascript async await对服务器进行服务调用，主要来自componentDidMount或componentDidUpdate，但当我想要将响应作为道具发送到其他组件时，我当前正在使用该响应更新组件的状态。但由于作为用户，我实际上并没有修改那个特定的状态，所以它感觉就像是一个浪费的变量。有没有办法让它作为我的组件的道具，而不是设置状态。this.set
浏览 17提问于2019-06-17得票数 0
我正在尝试将状态更改函数作为道具发送到另一个组件 const App = () => { const如何将此函数作为属性发送到其他组件
浏览 15提问于2020-09-11得票数 0
回答已采纳
2回答
我已经成功地将数据插入到mongo中，但是我无法通过单击立即将数据传递到另一个js中。导入React，{ Component }从“react”import ./App.css‘导入axios’constructor(props) { this.state = {</form> </
浏览 0提问于2021-10-02得票数 0
我从getstaticprops中的外部API获取一个巨大的json数据。然后，这些数据将被分成几个部分，作为支持发送到其他静态页面(数百页)。page1Data, page2Data, page300Data, ...allData } = jsonData
}
我只知道如何像这样将静态道具数据发送到文件中的组件是否有将这些
浏览 3提问于2022-01-31得票数 1
关于这篇由@benawad user编写的教程"React Router Native - Passing“：4272160我想不出在页面之间传递数据时如何从<Text>JSON.stringify(location.state)}</Text>中的字符串数据中提取{"val1:"bob","val2":5}中的bob或5 <Text>
浏览 8提问于2019-08-02得票数 0
我正在使用react路由器和gridjs，并希望在一个单元格内显示一个链接，用户可以单击该链接以转到详细页面。作为第一种方法，我尝试使用列格式化程序：import { Grid } from 'gridjs-react';
let history = useHistory();
浏览 0提问于2021-03-09得票数 0
我试着去了解什么是最好的方式来使用道具来回应假设我在容器的JSX中使用了一个组件。现在，如果我也想在组件中使用FormattedMessage，应该在组件中再次使用导入吗？或者我应该通过容器将FormattedMessage作为支柱发送到组件<
浏览 3提问于2017-11-13得票数 3
1回答
我有一个父组件，它通过路由(通过history.push)接收一些数据(一个大对象)，现在我必须将该数据发送给两个子组件。现在，我可以将这个大对象发送给两个子组件，并在各自的子组件中进行两个计算(相互独立)，或者我可以在父组件中进行两个计算，然后将计算值发送给子组件，从而减小道具的大小。小道具(是不是尺寸)能带来任何性能上的好处(不管我目前的情况如何)？
是否有测试库来测量和量化这
浏览 3提问于2020-04-17得票数 2
回答已采纳
我使用的反应路由器挂钩导航useHistory。导航：history.push("/home", { update: true });但是update总是没有定义。
浏览 4提问于2019-12-24得票数 23
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
