如何使用React Router在页面之间有效传递数据？

如何使用 React Router 将数据从一个页面传递到另一个页面

使用 React Router 时，您可能会遇到需要的情况将数据从一个页面传递到另一页面，例如在不同的屏幕上显示用户详细信息。下面是传递数据的几个选项：

选项 1：传递 Route State

• 使用 React Router DOM v6 中的 Link 组件，或者使用 React Router DOM v6 中的 Navigate 组件v5，并设置 state 属性。
• 从接收方的位置对象中解压状态
• 优点：状态在 URL 中不可见，并保持 UI 干净。

选项 2：在 URL 路径中传递某些内容

• 使用链接组件或编程将数据附加到 URL 路径
• 从接收页面的 props.match 对象获取参数。
• 优点：数据存储在 URL 中，可以轻松共享。

选项 3：在 URL 查询字符串中传递一些内容

• 使用Link 组件或编程导航上的 search 属性将数据作为查询参数传递。
• 使用 useSearchParams 钩子 (v6) 或 URLSearchParams 对象 (v5) 解析接收页面上的查询参数。
• 优点：可以轻松传递少量数据。

React 的注意事项类组件

• React Router DOM 版本 6 已删除了路由属性和 withRouter HOC。
• 要访问类组件中的路由属性，请使用包含以下内容的自定义 withRouter HOC：必要的钩子。

以上是如何使用React Router在页面之间有效传递数据？的详细内容。更多信息请关注PHP中文网其他相关文章！