Link to={path} 中 const path = { pathname:'/wrapTop/right/TopicDetail', state:sUrl//要传递的数据 }; 此时返回上一页,通过路由再进入到这个页面,缺失要传递的参数 sUrl
时间: 2024-02-12 16:09:51 浏览: 76
详解如何使用router-link对象方式传递参数?
这个问题中涉及到 React Router 的路由传参问题。在使用 Link 组件跳转页面时,可以通过 state 属性传递参数。但是如果通过浏览器的返回按钮返回到上一页再次进入该页面时,参数会丢失。
解决方法是在组件挂载时,通过 props.location.state 获取传递的参数。同时,也可以使用 withRouter 高阶组件将 props 中的 location、history、match 属性注入到组件中,方便获取路由相关信息。
示例代码如下:
```
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class TopicDetail extends Component {
componentDidMount() {
const { state } = this.props.location;
// 获取传递的参数
console.log(state);
}
render() {
return (
<div>
{/* 页面内容 */}
</div>
);
}
}
export default withRouter(TopicDetail);
```
通过这种方式,无论是通过 Link 组件跳转页面还是通过浏览器返回按钮返回到上一页再次进入该页面,都可以获取到传递的参数。
阅读全文