React Hooks的history带参数跳转，并获取参数

最新推荐文章于 2022-08-30 10:12:51 发布
最新推荐文章于 2022-08-30 10:12:51 发布
阅读量3.2k 收藏
点赞数
文章标签： react.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianbiancai1/article/details/120027443
版权

跳转页面带参数

history.push({
	pathname: "/admin/test",
	query:{ id: user_id, name: user_name }
});

跳转后获取参数

const { query = {} } = props;
console.log(query.name);
天边彩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
react使用hashHistory实现类似get方法带参数跳转
01-08
import { HashRouter } from 'react-router-dom'; 传参： btnClick() { hashHistory.push({ pathname: '/apartmentReserve/'+yourApartmentId, query: { name:yourApartmentname, price:yourApartmentprice }...
React获取通过history.push中的state传递参数，并在新页面获取到state里面的数据
JulyNight的博客
02-02 956
【代码】React获取通过history.push中的state传递参数，并在新页面获取到state里面的数据。
react通过history.location.state来携带参数
m0_60823684的博客
11-20 4106
一.state格式 history.push(path, [state]) <Redirect to={{pathname: '/xxx', state: {} }} 二.实际操作 1.用history.push方法携带state参数 history.push('/login', { from: history.location.pathname }) 2.用Redirect里的to属性携带state参数 <Redirect to={{pathname: '/login',s
react用路由传递数据(useHistory)
lxn_zyl的博客
04-20 6882
引入: import { useHistory } from 'react-router-dom'; 下面那两个都要引入这个 传输数据: //注意先引入上面的 const history = useHistory(); function data(){ history.push('需要数据的路由的url', { state:数据 }) } 接收数据: 注意先引入上面的 const history = useHistory(); //接收函数 use
解决react路由跳转传参刷新页面后参数丢失问题
weixin_43954835的博客
04-14 8207
import { useHistory } from 'react-router-dom'; const history = useHistory(); history.push({ pathname: '/details', state: { name: name, id: id, }, }); 在history中使用state确实可以传参数，在进入页面时可以正常显示，但是在刷新页面后state里面的数据会清空，页面就无法正常显示。.
React 使用query在路由中传递多个参数
Java持续实践
02-09 1375
参数传递方 import React from 'react'; import { history } from 'umi'; const Sending: React.FC = () => { // 跳转页面 handleClick: (record: any) => { history.push({ pathname: '/页面路径/Detail/', query: { stockType: record.stock
react路由传参3种方式
lzfengquan的博客
08-30 5829
或者通过对象的方式传过去，页面进行接收。当然你在验证时候肯定是要自己state一个id值的，去承接设置新的值。缺点：使用HashRouter的话，刷新页面，参数会丢失；缺点：传值太多不方便而且url会变的很长。页面的接收，直接在钩子函数中进行接收验证。二：query传参：路由页面（无需配置）优点：传参优雅，传递参数可传对象；缺点：传值太多url也会变的很长。优点：传参优雅，传递参数可传对象；优点：页面刷新，参数不会丢失；缺点：刷新地址栏，参数丢失。1，刷新页面后参数不消失,j假设页面中的配置是这样的。...
详解react如何在组件中获取路由参数
12-29
路由参数 假如我们有很多 list 页面，这些页面除了动态内容不同，其他的页面部分都相同，这个时候需要怎么配置路由和组件呢？ 这种场景就需要用到路由的参数功能，增加一条包含参数的路由配置。 import List from '...
详解如何使用React Hooks请求数据并渲染
01-18
前言 在日常的开发中，从服务器端异步获取数据并渲染是相当高频的操作。...本文将会介绍如何使用React的新特性Hook来编写组件并获取数据渲染。 数据渲染 先来看一个数据渲染的简单demo import Reac
use-cookie:使用React Hooks获取，设置，更新和删除Cookie
05-06
使用React Hooks获取，设置，更新和删除Cookie。 安装 npm install --save @devhammed/use-cookie 用法 import React from 'react' import ReactDOM from 'react-dom' import useCookie from '@devhammed/use-...
React Redux 绑定与 React Hooks 和代理
06-08
有几个与此 repo 相关的项目。 这是它们的索引。 react-react-redux v5-alpha (this repo)：它有一个实验性的 react...react-react-redux 使用 React Hooks 和 Proxy 绑定 React Redux 如果您正在寻找非 Redux 库，请访
React history.push 传递参数
datouniao1的博客
12-14 2万+
react 组件之间跳转传递参数，在push的时候设置state 属性，然后再目标组件的props 中能够对传过来的参数进行接收
React路由跳转与传参
wdquan19851029的专栏
08-20 2056
路由跳转功能由React Router提供，需要先理解history，history是为React Router提供核心功能的包，能轻松地在客户端为项目添加基于location的导航，这种功能对于单页应用至关重要。 安装依赖： npm install --save history 存在三类history，分别是browser，hash，与 memory。history包提供每种history的创建方法。 1.首先定义history: 无论创建哪种history，最终都会得到一个几乎拥有相同属性
React Router 如何使用history跳转
qq_34153210的博客
05-20 1万+
react 路由
react 函数式组件 使用history.push的第二个参数完成路由传值的方法，此方法可类似于post传值，不在地址上显示。实现更优雅的传值
LuckDD的博客
09-14 4187
history.push(`自己的地址`, {standard:standardType}); 第二个参数为自己需要传递的值，以键值对的方式传递 接受： const history = useHistory();//声明 const standardType = history.location.state.standard;//可获取到上面传递的值。 次方法传递参数可避免参数中有/ / / 特殊字符带来的路径不对的坑。而且隐藏了需要传递的值，安全性更高。 ...
React 路由管理 - history
weixin_41154070的博客
04-20 5882
history插件返回了一个对象，主要有这几个方法： push replace listen window.history 中 改变路由的方法 pushState, replaceState, 这两个方法都不会触发路由改变事件popstate, history插件中实现了路由更改时调用 listen(fn) 传入的回调函数 在 location.search, location.hash改变时会触发 popstate 回调函数，回调函数中会调用 listen(fn), 传入的回调函数 ...
react路由的history跳转携带参数
qq_40862118的博客
05-14 1万+
关于react路由的history跳转 1、跳转时携带参数： this.props.history.push({ pathname:"/admin/reply", params:{ id:e.id } }) 2、在跳转后的页面获取参数： this.props.location.params.id
router路由跳转使用query传递参数刷新后数据无法获取，变成[object object]
m0_37097272的博客
05-19 1559
跳转路由使用的是history.push，在query中添加了要传给详情页的值，如下： history.push({ pathname: '/menu/detail', query: { comCodeOption: this.state.comCodeOption, } 其中comCodeOption格式如下： [ { "comCode": "23", "comName": "黑龙江分公司" }, {
React Router 页面传值的四种方法
热门推荐
QTFYING的博客
09-11 3万+
注：本文示例React Router版本为：3.0.2，使用前请注意检查版本 一. props.params官方例子使用 React router 定义路由时，我们可以给&lt;Route&gt;指定一个 path，然后指定通配符可以携带参数到指定的 path： 首先定义路由到 UserPage 页面:import { Router,Route,hashHistory} from 'react-...
react hooks传递参数
最新发布
05-28
React hooks 可以通过两种方式传递参数： 1. 使用 useState hook useState hook 可以接收一个初始值参数，这个参数可以是任何类型的值，包括对象和数组。例如，以下代码展示了如何使用 useState hook 创建一个计数器： ``` import React, { useState } from 'react'; function Counter({ initialCount }) { const [count, setCount] = useState(initialCount); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } export default Counter; ``` 在这个例子中，我们使用 initialCount 参数来初始化计数器的值，然后将其传递给 useState hook。 2. 使用 useContext hook useContext hook 可以让我们在组件之间共享数据，从而避免 props 层层传递的问题。例如，以下代码展示了如何使用 useContext hook 在组件之间共享数据： ``` import React, { useContext } from 'react'; const MyContext = React.createContext(); function ParentComponent({ someValue }) { return ( <MyContext.Provider value={someValue}> <ChildComponent /> </MyContext.Provider> ); } function ChildComponent() { const someValue = useContext(MyContext); return <p>Some value: {someValue}</p>; } export default ParentComponent; ``` 在这个例子中，我们创建了一个 MyContext 对象，并将其传递给 Provider 组件。然后，在 ChildComponent 组件中，我们使用 useContext hook 获取 MyContext 对象中的值。这个值可以是任何类型的数据，包括函数和对象。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天边彩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值