React.js 是一个快速、可扩展且灵活的 JavaScript 库，用于构建大型 Web 应用程序。在 React.js 中使用路由管理应用程序导航是非常重要的一部分。在本文中，我们将探讨在 React.js SPA（Single Page Application）中如何实现路由的传参。
什么是路由？
路由是 Web 应用程序中非常重要的一部分。它允许用户在应用程序中导航并访问不同的页面。路由是一种通信机制，它将 URL 映射到相关的代码和资源。
路由通常由两个参数组成：
- 路径：它是应用程序中页面的 URL。例如，"/home" 路径将导航到应用程序中的主页。
- 参数：它是路由器为应用程序提供的数据。例如，"/home?category=tech" 路径将显示具有“tech”类别的主页。
React.js 中的路由
在 React.js 中，我们可以使用许多不同的路由库实现应用程序的导航。这些库中的绝大多数都提供了一种将路由参数传递给 React 组件的方法。
最常见的 React 路由库是 React Router。它提供了许多不同的路由组件，如 Route，Link，Redirect 和 Switch。使用 React Router，我们可以在 React 应用程序中创建一个伟大而灵活的路由系统。
React Router 中的路由参数
React Router 中的路由参数可以通过在路径中添加参数来传递。例如，我们可以在路径中添加“/:id”以表示将参数“id”传递到相应的组件中。
在组件中，我们可以使用 props.match.params 对象来访问路由参数。props.match.params 对象包含 URL 参数的键值对。例如，如果路径为“/products/:id”，则可以通过 props.match.params.id 访问 URL 参数。
以下是一个我们可以通过路由参数获取产品的示例：
------ ----- ---- -------- ------ - --------- - ---- ------------------- -------- --------- - ----- - -- - - ------------ ------ ----------- ---------- - ------ ------- --------
在上面的代码中，我们使用 useParams 钩子从 URL 中获取 id 参数，并将其用于构建页面标题。
在 React.js SPA 中如何实现路由的传参？
React.js 中的路由参数是在路径中传递的。但是，有时我们需要将更多的数据传递给组件，例如一个整个对象或一组值。
在 React.js 中，我们可以使用查询字符串将数据传递给路由。查询字符串是 URL 中“?”后面的字符串，它可以包含多个键值对，这些键值对用“&”分隔。
以下是一个包含查询字符串的 URL 的示例：
-----------------------------
在 React.js 组件中，我们可以使用 props.location.search 属性来访问查询字符串。props.location.search 属性包含 URL 中的查询字符串。
例如，在下面的代码中，我们将查询字符串作为 props 传递给一个组件：
------ ----- ---- --------
------ - ---- - ---- -------------------
-------- -------------------- -
----- ----- - --- ------------------------------------------------
----- -------- - --- -------------------------------------------------------
------ -
-----
---------- ------------
--------- -----------
------------ --------------
----- ----------------------------------------- ------------
------
--
-
------ ------- --------------在上面的代码中，我们使用 URLSearchParams 构造函数解析查询字符串，并将其用于构建页面内容。我们还在组件中添加了一个链接，使用户可以返回包含查询字符串的搜索页面。
结论
在 React.js SPA 中，路由是管理应用程序导航的重要组成部分。通过使用 React Router，我们可以在 React 应用程序中实现灵活的路由系统。
在本文中，我们讨论了在 React.js SPA 中如何实现路由的传递。我们了解了使用路由参数和查询字符串在 React 中传递数据的不同方法，并提供了相应的代码示例。通过使用这些技术，我们可以构建出功能强大而灵活的 React.js 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6703554ed91dce0dc84b1fce