React 路由传参详解：params、search 的全面解读

2023-10-21 14:54:50

React 路由简介

React 路由是一个流行的 JavaScript 库，它允许你在 React 应用程序中创建复杂、灵活的导航系统。React 路由主要通过在不同的页面之间切换来实现页面导航。在 React 路由中，你可以定义不同的路由，每个路由对应一个特定的页面。当用户点击导航栏中的某个链接时，React 路由会加载对应的页面并显示出来。

React 路由传参

React 路由传参是指在路由之间传递数据。你可以通过在路由定义中使用 params 或 search 参数来实现传参。

params 参数：params 参数用于传递动态数据。例如，如果你想在用户页面显示用户的 ID，你可以在路由定义中使用 params 参数来接收用户的 ID。
search 参数：search 参数用于传递查询参数。例如，如果你想在搜索页面显示用户的搜索词，你可以在路由定义中使用 search 参数来接收用户的搜索词。

React 路由传参示例

下面是一个使用 params 参数传递数据的例子：

<Route path="/user/:id" component={UserPage} />

在这个路由定义中，:id 是一个参数。当用户访问 /user/1 这个 URL 时，params.id 的值将是 1。

下面是一个使用 search 参数传递数据的例子：

<Route path="/search" component={SearchPage} />

在这个路由定义中，search 参数将包含用户的搜索词。当用户访问 /search?q=react 这个 URL 时，search.q 的值将是 react。

React 路由传参的常见问题

在使用 React 路由传参时，你可能会遇到一些常见问题。下面是一些常见问题的解决方案：

如何在组件中访问路由参数？

你可以通过 useParams() 和 useSearchParams() 钩子函数来访问路由参数。
如何在路由定义中使用 params 和 search 参数？

你可以使用 : 和 ? 符号来指定 params 和 search 参数。例如，/user/:id 和 /search?q=:query。
如何在组件中使用 params 和 search 参数？

你可以通过 props 来访问 params 和 search 参数。例如，在组件中你可以使用 props.match.params.id 和 props.location.search.q 来访问路由参数。