在React.js中使用Reach Router将数据从一个页面传递到另一个页面,可以通过以下步骤实现:
npm install @reach/router
navigate
函数将数据传递到目标页面。例如,假设我们有一个名为HomePage
的组件,需要将数据传递到AboutPage
页面,可以按如下方式实现:import { navigate } from '@reach/router';
function HomePage() {
const handleClick = () => {
const data = { name: 'John', age: 25 };
navigate('/about', { state: data });
};
return (
<div>
<h1>Home Page</h1>
<button onClick={handleClick}>Go to About Page</button>
</div>
);
}
props.location.state
访问传递过来的数据。例如,在AboutPage
组件中可以这样使用:function AboutPage(props) {
const { state } = props.location;
return (
<div>
<h1>About Page</h1>
<p>Name: {state.name}</p>
<p>Age: {state.age}</p>
</div>
);
}
这样,当用户点击HomePage
中的按钮时,会导航到AboutPage
页面,并且可以在AboutPage
中访问到从HomePage
传递过来的数据。
关于Reach Router的更多信息和使用方法,可以参考腾讯云的相关产品文档:
领取专属 10元无门槛券
手把手带您无忧上云