ReactRouterv5在BrowserRouter和HashRouter模式下对location.state的支持

结论:HashRouter不支持location.state

文档:ReactRouter v5

在这里插入图片描述

从文档可看到history.push()方法支持2个参数:path, [state]
state即是location.state,常用于隐式地传递状态参数
但文档未提的是,仅适用于BrowserRouter,HashRouter下传入后无效,通过location.state取不到值。

个人场景:微前端适配两种路由模式,这条路走不通!!亲测避坑。

Demo:

import React, { useEffect } from 'react';
import { useHistory, useLocation, BrowserRouter, HashRouter } from 'react-router-dom-v5';

const ComponentA = () => {
	const history = useHistory()
	useEffect(() => {
		history.push('xxx/ComponentB', { from: 'aaa'})
	}, [])
}
const ComponentB = () => {
	const location = useLocation()
	useEffect(() => {
		console.log(location.state)
		// BrowserRouter: { from: 'aaa' }
		// HashRouter: undefined
	}, [location])
}

// 上层Router
<BrowserRouter>
	<Route path="xxx/ComponentA" component={ComponentA} />
	<Route path="xxx/ComponentB" component={ComponentB} />
</BrowserRouter>

<HashRouter>
	<Route path="xxx/ComponentA" component={ComponentA} />
	<Route path="xxx/ComponentB" component={ComponentB} />
</HashRouter>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值