当前位置：首页 > React

react如何从url取参数

2026-01-25 04:54:37React

获取URL参数的方法

在React中，可以通过多种方式从URL中获取参数。以下是几种常见的方法：

使用React Router的useParams

如果项目中使用的是React Router v5或更高版本，可以通过useParams钩子获取动态路由参数：

import { useParams } from 'react-router-dom';

function UserProfile() {
  const { userId } = useParams();

  return <div>User ID: {userId}</div>;
}

使用React Router的useSearchParams

对于查询参数（即URL中?后面的部分），可以使用useSearchParams钩子：

react如何从url取参数

import { useSearchParams } from 'react-router-dom';

function SearchPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q');

  return <div>Search Query: {query}</div>;
}

使用原生JavaScript的URLSearchParams

如果不使用React Router，可以通过原生JavaScript的URLSearchParamsAPI获取查询参数：

function getQueryParam(param) {
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  return urlParams.get(param);
}

// 使用示例
const id = getQueryParam('id');

使用第三方库query-string

对于更复杂的查询参数处理，可以安装query-string库：

react如何从url取参数

npm install query-string

使用示例：

import queryString from 'query-string';

const parsed = queryString.parse(window.location.search);
console.log(parsed.page); // 获取page参数

使用React Router的useLocation

对于需要获取完整URL信息的情况，可以使用useLocation钩子：

import { useLocation } from 'react-router-dom';

function CurrentPath() {
  const location = useLocation();

  return (
    <div>
      Current path: {location.pathname}
      Query string: {location.search}
    </div>
  );
}

选择哪种方法取决于项目需求和使用的路由库。React Router提供的方法通常是最简洁和推荐的方式。