React中使用react-router-dom路由传参的三种方式详解【含V5.x、V6.x】

2023-12-16 05:48:17

React 中的路由传参：一个终极指南

在单页面应用程序（SPA）中，管理页面之间的无缝导航至关重要。React 中的 react-router-dom 库提供了强大的路由功能，其中包括在页面间传递数据的路由传参。本文将深入探讨 React 中的路由传参，涵盖 params、search 和 state 参数的用法。

在 SPA 中，需要在页面间传递数据以支持各种交互。例如，在产品列表中点击一个产品时，需要将产品 ID 传递到产品详细信息页面。通过路由传参，可以实现这种数据传输，从而提升用户体验。

React-router-dom 提供了三种主要方式来实现路由传参：params、search 和 state 参数。每种方法都有其优点和适用场景。

params 参数是最常用的方法，允许在路由路径中传递数据。示例路径：

/product/:id

其中，:id 是 params 参数。访问此路由时，id 值存储在 this.props.match.params.id 中。

优点：

缺点：

适用场景：

search 参数使用查询字符串格式传递数据。示例路径：

/product?id=123&name=iPhone 13

其中，id=123&name=iPhone 13 是 search 参数。访问此路由时，search 参数存储在 this.props.location.search 中。

优点：

缺点：

适用场景：

state 参数通过 history.push() 或 history.replace() 方法传递数据。示例代码：

history.push({
  pathname: '/product',
  state: {
    id: 123,
    name: 'iPhone 13'
  }
})

其中，state 参数就是 state 参数。访问此路由时，state 参数存储在 this.props.location.state 中。

优点：

缺点：

适用场景：

react-router-dom 的 V5.x 和 V6.x 版本在路由传参方式上有一些差异：

V5.x： 使用 withRouter() 高阶组件获取路由参数。
V6.x： 使用 useParams(), useLocation() 和 useHistory() 钩子直接获取路由参数。
state 参数： V5.x 使用 history.pushState() 或 history.replaceState() 传递 state 参数；V6.x 使用 history.push() 或 history.replace() 传递 state 参数。