react-router实现跳转传值的方法示例
时间: 2023-09-07 09:02:25 浏览: 45
react-router可以通过URL参数和state来实现跳转传值的方式。下面是一个示例:
首先,在路由配置中定义需要传递参数的路由:
```
<Route path="/info/:id" component={Info} />
```
这里使用了参数占位符`:id`,用于动态传递实际的参数值。
然后,在需要跳转传值的组件中,使用`Link`组件来进行跳转并传递参数:
```
import { Link } from 'react-router-dom';
function Home() {
return (
<div>
<Link to="/info/1">跳转到Info页面并传递参数1</Link>
<Link to={{ pathname: '/info', state: { id: 2 } }}>跳转到Info页面并传递参数2</Link>
</div>
);
}
```
上述示例中,通过`to`属性传递URL参数和state来实现参数的传递。分别传递了参数1和参数2。
最后,在接收参数的组件中,可以通过`props.match.params`来获取URL参数,通过`props.location.state`来获取state参数:
```
function Info(props) {
const id = props.match.params.id;
const stateId = props.location.state.id;
return (
<div>
<h2>接收到的URL参数:{id}</h2>
<h2>接收到的state参数:{stateId}</h2>
</div>
);
}
```
上述示例中,`props.match.params.id`获取了URL参数的值,`props.location.state.id`获取了state参数的值。
通过上述示例,我们可以利用react-router实现跳转传值的功能。