React 函数组件 link传递参数，props接收参数

最新推荐文章于 2024-08-01 15:51:44 发布

半夏不会前端

最新推荐文章于 2024-08-01 15:51:44 发布

阅读量1.9k

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_43963525/article/details/122347797

版权

本文探讨了在React函数组件中如何通过link传递参数，并在目标组件中使用props来接收这些参数，特别是利用URL进行参数传递的方法，适用于前端开发中允许公开的数据交换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//传递的页面，用link跳转并且携带参数
  <Link to={
           '/notice/' + tabKey
           }

notice为要跳转的页面组件，tabkey=1为传递参数，用url传参可以传递允许暴露的参数。

//挂载的路由 noticeType为接收的参数
<UserRoute path="/notice/:noticeType" component={Notice} />

//接收的页面
//notice组件
1.引入RouteComponentProps
import { RouteComponentProps } from "react-router-dom";
2.定义
interface Props {
    noticeType: string

}
3.通过props拿到我们想要的noticeType
const Notice: React.FC<RouteComponentProps<Props>> = (props) => {
    const noticeType = props.match.params.noticeType
    }