如何在 React Router 中处理 SPA 中的带参数 URL
在开发 SPA(single-page application)时，我们通常会使用 React Router 这样的路由库来管理页面的路由。但是，在实际开发过程中，我们经常会遇到带参数的 URL，如何在React Router中处理这些 URL 带参数成为一个比较常见的问题。
下面我们会详细介绍 React Router 处理 URL 带参数的方法，并不断给出代码示例，帮助大家更好地掌握这个技术点。
URL 带参数的形式
在 SPA 中，我们使用 URL 来表示对应的页面视图。对于不同的页面视图，我们可以使用不同的 URL 来表示它们。例如：http://www.example.com/home 表示主页，http://www.example.com/about 表示关于页面。
然而，在某些情况下，我们希望 URL 带上一些参数，如：
- 查询字符串的形式：http://www.example.com/search?key=xxxxx
- RESTful 形式：http://www.example.com/users/1、http://www.example.com/articles/22
其中，搜索页面参数 key=xxxxx，用户页面参数为 1，文章页面参数为 22。
在 React Router 中处理 URL 带参数
在 React Router 中处理 URL 带参数，通常有两种方式：
- 使用 URL 查询参数
- 使用路由参数
接下来我们将分别介绍这两种方式。
- 使用 URL 查询参数
URL 查询参数是通过 URL 中的问号(?)和参数名=参数值的形式表示的，例如：http://www.example.com/search?key=xxxxx。
在 React Router 中，我们可以通过 this.props.location.search 获取到 URL 查询参数，并使用库如 query-string 来将它转换为对象的形式，以方便我们进行访问及判断。
例如我们要在 Search 组件中展示搜索关键字，我们可以使用以下代码来实现：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ----------- ---- --------------- ----- ------ ------- --------------- - -------- - ----- - -------- - - ----------- ----- - --- - - ----------------------------------- ------ - ----- ---------- ---------- ------ -- - - ------ ------- -------展开代码
首先，我们引入了 query-string 库来将 this.props.location.search 查询参数转换为对象的形式。在 render 函数中，我们通过解构 this.props.location 获取查询参数并通过解构语法从对象中获取 key 值，最后展示在页面中。
- 使用路由参数
与 URL 查询参数不同，路由参数是通过 URL 的路径部分表示的，例如：http://www.example.com/users/1，其中 1 就是路由参数。
在 React Router 中，我们可以使用“:”符号来表示路由参数，并在 Route 组件中使用它来表示对应的参数名称。
例如，在我们需要展示用户具体信息的页面中，我们可以使用以下代码来实现：
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ---- ------- --------------- - -------- - ----- - ----- - - ----------- ------ - ----- -------- ---------------------- ------ -- - - ------ ------- -----展开代码
在上面的代码中，我们使用 match.params.id 来获取路由参数，并展示在页面中。
总结
以上就是 React Router 处理 SPA 中 URL 带参数的两种方法，即使用 URL 查询参数和使用路由参数。两者各有优缺点，应根据实际需求进行选择。
总体来说，在实际开发中，使用路由参数相对来说更加直观，因此我们更加推荐采用路由参数的方式进行处理。当然，在某些情况下，使用 URL 查询参数则更为合适，例如搜索页面等。
最后，希望本文能帮助到各位开发者更好地解决 React Router 处理 URL 带参数的问题，同时也为大家提供了一些 React Router 实战中的实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64589524968c7c53b0aee8f9
