在React本机导航中传递参数可以通过以下几种方式实现:
import { useHistory } from 'react-router-dom';
function goBack() {
const history = useHistory();
history.push('/target-page?param1=value1¶m2=value2');
}
在目标页面中,可以使用react-router-dom库提供的useLocation钩子来获取URL参数。例如:
import { useLocation } from 'react-router-dom';
function TargetPage() {
const location = useLocation();
const params = new URLSearchParams(location.search);
const param1 = params.get('param1');
const param2 = params.get('param2');
// 使用参数进行逻辑处理
// ...
return (
// 目标页面的内容
);
}
import { useDispatch } from 'react-redux';
import { updateParam } from 'path/to/actions';
function goBack() {
const dispatch = useDispatch();
dispatch(updateParam('value1'));
// 导航到目标页面
}
在目标页面中,可以使用状态管理库提供的相关方法来获取参数的值。例如:
import { useSelector } from 'react-redux';
function TargetPage() {
const param1 = useSelector(state => state.param1);
// 使用参数进行逻辑处理
// ...
return (
// 目标页面的内容
);
}
import { useContext } from 'react';
import { ParamContext } from 'path/to/context';
function goBack() {
const { setParam } = useContext(ParamContext);
setParam('value1');
// 导航到目标页面
}
在目标页面中,可以通过上下文消费者组件来获取参数的值。例如:
import { useContext } from 'react';
import { ParamContext } from 'path/to/context';
function TargetPage() {
const { param1 } = useContext(ParamContext);
// 使用参数进行逻辑处理
// ...
return (
// 目标页面的内容
);
}
以上是在React本机导航中传递参数的几种常见方式。根据具体需求和项目架构的不同,选择适合的方式来传递参数。
领取专属 10元无门槛券
手把手带您无忧上云