在React中,可以使用路由(react-router)来进行页面的跳转和传递参数。以下是一种常用的方法:
1.首先,确保你已经安装了react-router-dom。如果还没有安装,可以通过以下命令进行安装:
npm install react-router-dom
或者
yarn add react-router-dom
2.在需要跳转的组件中,使用<Link>或<NavLink>标签进行页面的跳转,并在state属性中传递参数。例如:
import { Link } from 'react-router-dom';
function MyComponent() {
return (
react router v6 文档
<div>
<Link to="/target" state={{ param1: 'value1', param2: 'value2' }}>Go to Target</Link>
</div>
);
}
在这个例子中,我们通过state属性传递了两个参数param1和param2。
3. 在目标组件中,使用useLocation钩子来获取传递的参数。例如:
import { useLocation } from 'react-router-dom';
function TargetComponent() {
const location = useLocation();
const param1 = location.state?.param1; // 使用可选链操作符获取param1,避免undefined错误
const param2 = location.state?.param2; // 使用可选链操作符获取param2,避免undefined错误
return (
<div>
<p>Param1: {param1}</p>
<p>Param2: {param2}</p>
</div>
);
}
在这个例子中,我们通过useLocation钩子获取了传入的参数,并显示在页面上。请注意,我们使用了可选链操作符(?.)来获取param1和param2的值,这可以避免在未定义的情况下抛出错误。