返回

React获取url参数的几种方法

2023-04-26 react url参数 react获取url参数 7477 0

在React中获取URL参数的方法有以下几种:

使用window.location.search

const searchParams = new URLSearchParams(window.location.search);
const id = searchParams.get('id');

使用react-router-dom

如果使用了react-router-dom路由库,则可以使用useParams钩子来获取URL参数。例如,如果的URL路径为/users/:id,可以像这样获取id参数:

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

function User() {
  const { id } = useParams();
  return <div>{id}</div>;
}

使用query-string库

可以使用query-string库来解析URL查询参数。

import queryString from 'query-string';

const values = queryString.parse(window.location.search);
const id = values.id;

无论选择哪种方法,都应该首先确保在访问参数之前进行参数存在性检查,以避免潜在的错误。

您可能感兴趣:

阿里云 云服务器 99元1年 2核2G 3M固定带宽 续费与新购同价

DOVE 网络加速器免费试用

顶部