react-router如何传参

React 路由参数传递：params与query方式详解

最新推荐文章于 2025-01-12 19:02:05 发布

原创最新推荐文章于 2025-01-12 19:02:05 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

前端同时被 3 个专栏收录

26 篇文章

订阅专栏

react

13 篇文章

订阅专栏

JavaScript

8 篇文章

订阅专栏

本文详细介绍了在React应用中如何通过`params`和`query`进行页面间参数传递。首先展示了如何在路由配置中设置路径，然后在跳转页面的方法中分别使用`params`和`query`传递`id`和多个参数，并在目标页面中获取这些传递的数据。通过实例代码，解析了两种不同传递方式的用法和区别。

通过params传参

/*路由配置页面*/
<Route path="/addPage/:id" component={addPage} />

/*跳转前的页面，点击后跳转的方法*/
goAddPage() {
    let id = 111
    this.props.router.push({
        pathname: `/addPage/${id}`
    })
}

在跳转后的页面中可以通过this.props.router.params得到传递的params

通过query传参

/*路由配置页面*/
<Route path="/addPage" component={addPage} />

/*跳转前的页面，点击后跳转的方法*/
goAddPage() {
    const query = {
        id: 111,
        name: '云中客'
    }
    this.props.router.push({
        pathname: '/addPage/',
        query
    })
}

在跳转后的页面中通过this.props.router.location.query得到传递的query