react router get query params-原创手记-慕课网

React Router：获取URL查询参数的利器

React Router 是 React 官方提供的一种前端路由解决方案，它的出现大大简化了单页面应用程序（SPA）中的路由管理和跳转功能。而在 React Router 中，我们可以通过组件生命周期函数 getQueryParams 来获取 URL 查询参数。

参数对象的理解

getQueryParams 方法的参数是一个对象，这个对象包含了由 URL 查询字符串组成的键值对。以 http://example.com/?name=John&age=30 为例，getQueryParams 接收到的参数对象可能如下所示：

{ name: 'John', age: 30 }

在这个例子中，name 和 age 是两个键值对，它们分别对应了 URL 查询字符串中的 name=John 和 age=30。我们可以使用这个参数对象来访问和处理 URL 查询数据，例如，我们可以根据 name 参数来显示用户的姓名，根据 age 参数来判断用户的年龄是否符合条件等。

使用场景

getQueryParams 方法在实际应用中的使用场景非常广泛，比如当我们需要从 URL 中提取查询参数来进行数据分页时，或者需要根据 URL 中的参数来动态加载不同的页面内容时，都可以通过 getQueryParams 方法来轻松实现。

示例代码

下面给出一个简单的示例，展示如何通过 getQueryParams 方法获取 URL 查询参数：

import { useEffect, useState } from 'react';
import { Route, Link } from 'react-router-dom';

function App() {
  const [params, setParams] = useState({});

  useEffect(() => {
    // 获取 URL 查询参数
    const queryParams = getQueryParams(window.location.search);

    // 将查询参数存储到组件状态中
    setParams(queryParams);
  }, []);

  return (
    <div>
      {/* 根据查询参数渲染不同内容 */}
      {Object.keys(params).map((key) => (
        <div key={key}>{key} : {params[key]}</div>
      ))}
    </div>
  );
}

function getQueryParams(searchParams) {
  const queryParams = {};

  for (let [key, value] of searchParams.entries()) {
    if (value !== null) {
      queryParams[decodeURIComponent(key)] = decodeURIComponent(value);
    }
  }

  return queryParams;
}

export default App;

在这个示例中，我们在 App 组件中使用了 useState 和 useEffect hooks 来获取 URL 查询参数，并将获取到的参数存储到了组件的状态中。在页面上，我们则通过遍历 params 对象来展示每个查询参数的内容。

总的来说，getQueryParams 方法是 React Router 提供的一个方便的工具，它可以帮助我们轻松地获取 URL 查询参数，并在我们的应用程序中进行处理和使用。